<!DOCTYPE html>


  <html class="dark page-post">


<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  
  <title>jQuery笔记总结篇 | Poetry&#39;s Blog</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="JavaScript,jQuery,">
  

  <meta name="description" content="原文链接 http://blog.poetries.top/2016/10/20/review-jQuery  首先，来了解一下jQuery学习的整体思路">
<meta name="keywords" content="JavaScript,jQuery">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery笔记总结篇">
<meta property="og:url" content="http://blog.poetries.top/2016/10/20/review-jQuery/index.html">
<meta property="og:site_name" content="Poetry&#39;s Blog">
<meta property="og:description" content="原文链接 http://blog.poetries.top/2016/10/20/review-jQuery  首先，来了解一下jQuery学习的整体思路">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery2.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery3.png">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery4.jpg">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery5.jpg">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery6.jpg">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery7.jpg">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery7.jpg">
<meta property="og:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery9.png">
<meta property="og:updated_time" content="2020-08-15T04:25:31.934Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="jQuery笔记总结篇">
<meta name="twitter:description" content="原文链接 http://blog.poetries.top/2016/10/20/review-jQuery  首先，来了解一下jQuery学习的整体思路">
<meta name="twitter:image" content="http://7xq6al.com1.z0.glb.clouddn.com/jquery2.png">

  

  
    <link rel="icon" href="/favicon.ico">
  

  <link href="/css/styles.css?v=c114cbeddx" rel="stylesheet">
<link href="/css/other.css?v=c114cbeddx" rel="stylesheet">


  
    <link rel="stylesheet" href="/css/personal-style.css">
  

  

  
  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?40b1f89aa80f2527b3db779c6898c879";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>


  
  <script type="text/javascript">
	(function(){
	    var bp = document.createElement('script');
	    var curProtocol = window.location.protocol.split(':')[0];
	    if (curProtocol === 'https') {
	        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
	    }
	    else {
	        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
	    }
	    var s = document.getElementsByTagName("script")[0];
	    s.parentNode.insertBefore(bp, s);
	})();
  </script>



  
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css">
  

  <!-- 聊天系统 -->
  
    
   <link type="text/css" rel="stylesheet" href="/renxi/default.css">
   <style>
      #modal {
        position: static !important;
      }
      .filter {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: #fe5757;
        animation: colorChange 30s ease-in-out infinite;
        animation-fill-mode: both;
        mix-blend-mode: overlay;
      }
  
      @keyframes colorChange {
        0%, 100% {
            opacity: 0;
        }
        50% {
            opacity: .9;
        }
      }
   </style>
</head>
</html>
<body>
  
  
    <span id="toolbox-mobile" class="toolbox-mobile">导航</span>
  

  <div class="post-header CENTER">
   
  <div class="toolbox">
    <a class="toolbox-entry" href="/">
      <span class="toolbox-entry-text">导航</span>
      <i class="icon-angle-down"></i>
      <i class="icon-home"></i>
    </a>
    <ul class="list-toolbox">
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/archives/"
            rel="noopener noreferrer"
            target="_self"
            >
            博客
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/categories/"
            rel="noopener noreferrer"
            target="_self"
            >
            分类
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/tags/"
            rel="noopener noreferrer"
            target="_self"
            >
            标签
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/search/"
            rel="noopener noreferrer"
            target="_self"
            >
            搜索
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/link/"
            rel="noopener noreferrer"
            target="_self"
            >
            友链
          </a>
        </li>
      
        <li class="item-toolbox">
          <a
            class="CIRCLE"
            href="/about/"
            rel="noopener noreferrer"
            target="_self"
            >
            关于
          </a>
        </li>
      
    </ul>
  </div>


</div>


  <div id="toc" class="toc-article">
    <strong class="toc-title">文章目录<i class="iconfont toc-title" style="display:inline-block;color:#87998d;width:20px;height:20px;">&#xf004b;</i></strong>
    <ol class="toc"><li class="toc-item toc-level-4"><a class="toc-link" href="#第一节-jQuery初步认知"><span class="toc-text">第一节 jQuery初步认知</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#jQuery概述"><span class="toc-text">jQuery概述</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#初步了解JQuery"><span class="toc-text">初步了解JQuery</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第二节-选择器"><span class="toc-text">第二节 选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#过滤选择器"><span class="toc-text">过滤选择器</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第三节-选择器优化"><span class="toc-text">第三节 选择器优化</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第四节-代理对象属性和样式操作"><span class="toc-text">第四节 代理对象属性和样式操作</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第五节-jQuery中DOM操作"><span class="toc-text">第五节 jQuery中DOM操作</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#CSS-DOM操作"><span class="toc-text">CSS DOM操作</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第六节-jQuery动画"><span class="toc-text">第六节 jQuery动画</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#回顾上节"><span class="toc-text">回顾上节</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#一、创建节点"><span class="toc-text">一、创建节点</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#二、插入内容"><span class="toc-text">二、插入内容</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#三、删除内容"><span class="toc-text">三、删除内容</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#四、克隆内容：创建指定节点副本"><span class="toc-text">四、克隆内容：创建指定节点副本</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#五、替换内容"><span class="toc-text">五、替换内容</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#本节新知识"><span class="toc-text">本节新知识</span></a></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第七节-jQuery中的事件"><span class="toc-text">第七节 jQuery中的事件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第八节-jQuery与Ajax"><span class="toc-text">第八节 jQuery与Ajax</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#创建一个Ajax请求"><span class="toc-text">创建一个Ajax请求</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#jQuery中的Ajax-补充部分–来自锋利的jQuery"><span class="toc-text">jQuery中的Ajax  [补充部分–来自锋利的jQuery]</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#load-方法"><span class="toc-text">load()方法</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#get-和-post-方法"><span class="toc-text">$.get()和$.post()方法</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#ajax-方法"><span class="toc-text">$.ajax()方法</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#第九节-插件"><span class="toc-text">第九节 插件</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录一-jQuery各个版本新增的一些常用的方法"><span class="toc-text">附录一 jQuery各个版本新增的一些常用的方法</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录二-jQuery性能优化"><span class="toc-text">附录二 jQuery性能优化</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录三-常用的jQuery代码片段"><span class="toc-text">附录三 常用的jQuery代码片段</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录四-常见CND加速服务"><span class="toc-text">附录四 常见CND加速服务</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#附录五-jQuery的一些资源"><span class="toc-text">附录五 jQuery的一些资源</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#扩展阅读"><span class="toc-text">扩展阅读</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#参考"><span class="toc-text">参考</span></a></li></ol>
  </div>
  




<div class="content content-post CENTER">
   <!-- canvas 彩带 -->
<canvas id="evanyou" width="1302" height="678" style="position: fixed;width: 100%;height: 100%;top: 0;left:0;z-index:-1;"></canvas>

<article id="post-review-jQuery" class="article article-type-post" itemprop="blogPost">
  <header class="article-header" style="position:relative;">
    <h1 class="post-title">jQuery笔记总结篇</h1>

    <div class="article-meta">
      <span>
        <i class="icon-calendar"></i>
        <span>2016.10.20</span>
      </span>

      
        <span class="article-author">
          <i class="icon-user"></i>
          <span>Poetry</span>
        </span>
      

      
  <span class="article-category">
    <i class="icon-list"></i>
    <a class="article-category-link" href="/categories/Front-End/">Front-End</a>
  </span>



      

      
      <i class="fa fa-eye"></i> 
        <span id="busuanzi_container_page_pv">
           &nbsp热度 <span id="busuanzi_value_page_pv">
           <i class="fa fa-spinner fa-spin"></i></span>℃
        </span>
      
      
       
          <span class="post-count">
            <i class="fa fa-file-word-o"></i>&nbsp
            <span>字数统计 13.5k字</span>
          </span>

          <span class="post-count">
            <i class="fa fa-columns"></i>&nbsp
            <span>阅读时长 54分</span>
          </span>
      
      
    </div>

    <i class="iconfont" id="toc-eye" style="display:inline-block;color:#b36619;position:absolute;top:0;right:0;cursor:pointer;
    font-size: 24px;">&#xe61c;</i>

  </header>

  <div class="article-content">
    
      <div id="container">
        <blockquote>
<p>原文链接 <a href="http://blog.poetries.top/2016/10/20/review-jQuery">http://blog.poetries.top/2016/10/20/review-jQuery</a></p>
</blockquote>
<p>首先，来了解一下<code>jQuery</code>学习的整体思路</p>
<a id="more"></a>
<ul>
<li><a href="http://pan.baidu.com/s/1slq212l" target="_blank" rel="noopener">XMind源文件提供参考下载</a></li>
</ul>
<h4 id="第一节-jQuery初步认知"><a href="#第一节-jQuery初步认知" class="headerlink" title="第一节 jQuery初步认知"></a>第一节 jQuery初步认知</h4><hr>
<h5 id="jQuery概述"><a href="#jQuery概述" class="headerlink" title="jQuery概述"></a>jQuery概述</h5><hr>
<ul>
<li><p><strong><code>JQuery</code>概念</strong></p>
<ul>
<li><code>javascript</code>概念<ul>
<li>基于<code>Js</code>语言的<code>API</code>和语法组织逻辑，通过内置<code>window</code>和<code>document</code>对象，来操作内存中的<code>DOM</code>元素</li>
</ul>
</li>
<li><code>JQuery</code>概念<ul>
<li>基于<code>javascript</code>的，同上，提高了代码的效率</li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>jQuery</code>是什么:</strong></p>
<ul>
<li>是一个<code>javascript</code>代码仓库，我们称之为<code>javascript</code>框架。</li>
<li>是一个快速的简洁的<code>javascript</code>框架，可以简化查询<code>DOM</code>对象、处理事件、制作动画、处理<code>Ajax</code>交互过程。</li>
<li><strong>它可以帮我们做什么(有什么优势)</strong><ul>
<li>轻量级、体积小，使用灵巧(只需引入一个<code>js</code>文件)</li>
<li>强大的选择器</li>
<li>出色的<code>DOM</code>操作的封装</li>
<li>出色的浏览器兼容性</li>
<li>可靠的事件处理机制</li>
<li>完善的<code>Ajax</code></li>
<li>链式操作、隐式迭代</li>
<li>方便的选择页面元素(模仿<code>CSS</code>选择器更精确、灵活)</li>
<li>动态更改页面样式/页面内容(操作<code>DOM</code>，动态添加、移除样式)</li>
<li>控制响应事件(动态添加响应事件)</li>
<li>提供基本网页特效(提供已封装的网页特效方法)</li>
<li>快速实现通信(<code>ajax</code>)</li>
<li>易扩展、插件丰富</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>如何引入<code>JQuery</code>包</strong></p>
<ul>
<li>引入本地的<code>JQuery</code></li>
<li>引入<code>Google</code>在线提供的库文件（稳定可靠高速）</li>
<li><p>使用<code>Google</code>提供的<code>API</code>导入 <code>&lt;script type=“text/javascript” src=“jquery.js”&gt;&lt;/script&gt;</code></p>
</li>
<li><p>写第一个<code>JQUery</code>案例</p>
<ul>
<li>解释:在<code>JQuery</code>库中，<code>$</code>是<code>JQuery</code>的别名，<code>$()</code>等效于就<code>jQuery()</code></li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;script type=“text/javascript” src=“”&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type=“text/</span>javascript”&gt;</span><br><span class="line">	$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		alert(“jQuery 你好!”);</span><br><span class="line">	&#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<ul>
<li><p><strong>讲解<code>$(function(){})</code>;</strong></p>
<ul>
<li><code>$</code>是<code>jQuery</code>别名。如<code>$()</code>也可<code>jQuery()</code>这样写,相当于页面初始化函数，当页面加载完毕，会执行<code>jQuery()</code>。</li>
<li>希望在做所有事情之前，<code>JQuery</code>操作<code>DOM</code>文档。必须确保在<code>DOM</code>载入完毕后开始执行，应该用<code>ready</code>事件做处理<code>HTML</code>文档的开始</li>
<li><code>$(document).ready(function(){})</code>;<ul>
<li>类似于<code>js</code>的<code>window.onload</code>事件函数，但是<code>ready</code>事件要先于<code>onload</code>事件执行</li>
<li><code>window.onload = function(){}</code>;</li>
</ul>
</li>
<li><p>为方便开发，<code>jQuery</code>简化这样的方法，直接用<code>$()</code>表示</p>
</li>
<li><p><code>JQuery</code>的<code>ready</code>事件不等于<code>Js</code>的<code>load</code>：</p>
<ul>
<li>执行时机不同：<code>load</code>需要等外部图片和视频等全部加载才执行。<code>ready</code>是<code>DOM</code>绘制完毕后执行，先与外部文件</li>
<li>用法不同：<code>load</code>只可写一次，<code>ready</code>可以多次</li>
</ul>
</li>
</ul>
</li>
<li><strong><code>window.onload</code>与<code>$(document).ready()</code>对比</strong></li>
</ul>
<table>
<thead>
<tr>
<th></th>
<th>window.onload</th>
<th>$(document).ready()</th>
</tr>
</thead>
<tbody>
<tr>
<td>执行时机</td>
<td>必须等网页中所有内容加载完后(图片)才执行</td>
<td>网页中的<code>DOM</code>结构绘制完后就执行,可能<code>DOM</code>元素相关的东西并没有加载完</td>
</tr>
<tr>
<td>编写个数</td>
<td>不能同时执行多个</td>
<td>能同时执行多个</td>
</tr>
<tr>
<td>简化写法</td>
<td>无</td>
<td><code>$(document).ready(function(){ //.. });</code><br><br>推荐写法：<code>$(function(){ });</code></td>
</tr>
</tbody>
</table>
<ul>
<li><p><strong><code>jQuery</code>有哪些功能(<code>API</code>)</strong>：</p>
<ul>
<li>选择器 </li>
<li>过滤器 </li>
<li>事件 </li>
<li>效果 </li>
<li><code>ajax</code></li>
</ul>
</li>
<li><p><strong>简单的<code>JQuery</code>选择器</strong>：</p>
<ul>
<li><code>JQuery</code>基本选择器（<code>ID</code>选择器，标签选择器，类选择器，通配选择器和组选择器<code>5</code>种）</li>
<li><code>ID</code>选择器：<code>document.getElementById(id)</code>与<code>$(&quot;#id&quot;)</code>对比(改变文字大小)—<code>id</code>唯一，返回单个元素</li>
<li>标签选择器：<code>document.getElementsByTagName(tagName)</code>与<code>$(&quot;tagname&quot;)</code>对比—多个标签，返回数组</li>
<li>类选择器:<code>$(&quot;.className&quot;)</code>–多个<code>classname</code>（改变背景图片）</li>
<li>通配选择器：<code>document.getElementsByTagName(&quot;*&quot;)</code>与<code>$(&quot;*&quot;)</code>对比—指范围内的所有标签元素</li>
<li>组选择器：<code>$(&quot;seletor1,seletor2,seletor3&quot;)</code>—-无数量限制，用逗号分割</li>
</ul>
</li>
</ul>
<h5 id="初步了解JQuery"><a href="#初步了解JQuery" class="headerlink" title="初步了解JQuery"></a>初步了解<code>JQuery</code></h5><hr>
<ul>
<li><strong><code>JQuery</code>是什么</strong><ul>
<li><code>javascript</code>用来干什么的：<ul>
<li>操作<code>DOM</code>对象</li>
<li>动态操作样式<code>css</code></li>
<li>数据访问</li>
<li>控制响应事件等</li>
</ul>
</li>
<li><code>jQuery</code>作用一样，只是更加快速简洁</li>
</ul>
</li>
<li><p><strong>如何引用<code>JQuery</code></strong></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;script type=<span class="string">"text/javascript"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">写第一个JQUery案例</span></span><br><span class="line"><span class="regexp">&lt;script type=“text/</span>javascript” src=“”&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script type=“text/</span>javascript”&gt;</span><br><span class="line">	$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		alert(“jQuery 你好!”);</span><br><span class="line">	&#125;);</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p><strong><code>$()讲解</code></strong></p>
<ul>
<li><code>$</code>在<code>JQuery</code>库中，<code>$</code>是<code>JQuery</code>的别名，<code>$()</code>等效于就<code>jQuery()</code>.</li>
<li><code>$()</code>是<code>JQuery</code>方法,赞可看作是<code>JQuery</code>的选择器，与<code>css</code>选择器相似（可做对比）</li>
<li><code>var jQuery==$ =function(){}</code> <code>$()</code>本质就是一个函数也就是 <code>jQuery</code>的核心函数</li>
<li>只要是<code>jQuery</code>的对象都这样变量加上一个<code>符号$</code>方便识别：<code>var $div = $(&quot;#&quot;)</code></li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span>　<span class="title">$</span>(<span class="params">id</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="built_in">document</span>.getElementById(id);</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li><strong><code>$()</code>和<code>document</code>是相等的吗</strong></li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"a"</span> <span class="attr">class</span>=<span class="string">"aa"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"b"</span> <span class="attr">class</span>=<span class="string">"aa"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"c"</span> <span class="attr">class</span>=<span class="string">"aa"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">alert(document.getElementById("id") == $("#aa"));//返回结果为false</span><br><span class="line">alert(document.getElementById("id") == $("#aa").get(0));//返回true</span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>代理对象<code>$()</code></strong></p>
<ul>
<li><code>jQuery</code>中返回的是代理对象本身</li>
<li><code>jQuery</code>的核心原理是通过选择器找到对应的代理对象</li>
<li><code>jQuery</code>全都是通过方法操作</li>
<li>样式选择器<code>$(&quot;.className&quot;)</code><ul>
<li><code>$(&quot;.aa&quot;).css(&quot;color&quot;,&quot;green&quot;);</code></li>
</ul>
</li>
<li>id选择器(“”)<ul>
<li><code>$(&quot;#a&quot;).css(&quot;background-color&quot;,&quot;#ff0066&quot;);</code></li>
</ul>
</li>
<li>标签选择器<ul>
<li><code>$(&quot;p&quot;).css(&quot;color&quot;,&quot;#cc3366&quot;);</code></li>
</ul>
</li>
<li>组选择器<ul>
<li><code>$(&quot;#b ul li&quot;).size();</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>对象转换(<code>$(element)</code>)</strong></p>
<ul>
<li>原生<code>dom</code>对象和<code>jquery</code>代理对象的相互转换</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(传入的原生对象);</span><br><span class="line"><span class="comment">//原生对象转化成jQuery对象</span></span><br><span class="line"><span class="keyword">var</span> nav = <span class="built_in">document</span>.getElementById(<span class="string">"nav"</span>);</span><br><span class="line"><span class="keyword">var</span> $nav = $(nav);</span><br><span class="line">alert($nav.get(<span class="number">0</span>) == nav);<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<ul>
<li><p><strong>检索范围的限制（<code>$(&#39;字符串&#39;,element)</code>）</strong></p>
<ul>
<li><p><strong>总结：三种写法对比：</strong></p>
<ul>
<li><p>方式一：不推荐 搜索速度最慢</p>
<ul>
<li><code>$(&quot;#nav&quot;).css();</code></li>
<li><code>$(&quot;#nav li&quot;).css();</code></li>
</ul>
</li>
<li><p>方式二：搜索速度最快 链式操作</p>
<ul>
<li><code>$(&quot;#nav&quot;).css().children().css();</code></li>
</ul>
</li>
<li><p>方式三：也常用 速度第二快</p>
<ul>
<li><code>var $nav = $(&quot;#nav&quot;).css()</code>;</li>
<li><code>$(&quot;li&quot;,$nav).css()</code>;  <code>$nav</code>限制了搜索范围 速度快</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>总结： <code>$()</code> <code>jquery</code>核心方法的作用和使用场景</strong></p>
<ul>
<li>如果是一个字符串参数并且没有标签对（选择器）<code>$(ul.nav&quot;)</code></li>
<li>如果是一个字符串参数并且有标签对（创建<code>html</code>标签）<code>$(&quot;&lt;img&gt;&quot;)</code> –最终加到<code>DOM</code>树中 <code>$xx.append(&quot;&lt;img&gt;&quot;)</code>;</li>
<li>如果是传入一个<code>element dom</code>对象，直接包装为<code>proxy</code>对象返回 <code>$(DOM对象)</code></li>
<li>如果第一个参数是字符串，第二个是<code>element</code> <code>dom</code>对象的话，那么就是在<code>element</code>这个<code>dom</code>对象里面寻找选择器对应的元素并且代理 <code>$(&quot;li&quot;,$DOM对象)</code></li>
</ul>
</li>
</ul>
<ul>
<li><strong>代理模式以及代理内存结构</strong></li>
</ul>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery2.png" alt="代理内存结构1"></p>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery3.png" alt="代理内存结构2"></p>
<h4 id="第二节-选择器"><a href="#第二节-选择器" class="headerlink" title="第二节 选择器"></a>第二节 选择器</h4><hr>
<ul>
<li><strong>来回顾一下<code>CSS</code>常用的选择器</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>语法</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>标签选择器</td>
<td><code>E{css规则}</code></td>
<td>以文档元素作为选择符</td>
</tr>
<tr>
<td><code>ID</code>选择器</td>
<td><code>#ID{css规则}</code></td>
<td><code>ID</code>作为选择符</td>
</tr>
<tr>
<td>类选择器</td>
<td><code>E.className{css规则}</code></td>
<td><code>class</code>作为选择符</td>
</tr>
<tr>
<td>群组选择器</td>
<td><code>E1,E2,E3{css规则}</code></td>
<td>多个选择符应用同样的样式</td>
</tr>
<tr>
<td>后代选择器</td>
<td><code>E F{css规则}</code></td>
<td>元素<code>E</code>的任意后代元素<code>F</code></td>
</tr>
</tbody>
</table>
<ul>
<li><p><strong>选择器引擎规则(<code>$(&#39;字符串&#39;)</code>)</strong></p>
<ul>
<li><code>css</code>选择器的规则<ul>
<li>标签选择器</li>
<li><code>id</code>选择器</li>
<li>类选择器</li>
<li>混合选择器</li>
</ul>
</li>
<li><p><code>css3</code>的选择器规则</p>
</li>
<li><p>状态和伪类（<code>:even</code> <code>:odd</code> <code>:first</code> <code>:last</code> <code>:eq(index)</code>）</p>
</li>
<li>属性（<code>[attr=value]</code>）</li>
</ul>
</li>
</ul>
<ul>
<li><strong>层级选择器:通过<code>DOM</code>的嵌套关系匹配元素</strong><ul>
<li><code>jQuery</code>层级选择器—-包含选择器、子选择器、相邻选择器、兄弟选择器4种</li>
<li>a.包含选择器：<code>$(&quot;a b&quot;)</code>在给定的祖先元素下匹配所有后代元素。(不受层级限制)</li>
<li>b.子选择器：<code>$(&quot;parent &gt; child&quot;)</code>在给定的父元素下匹配所有子元素。</li>
<li>c.相邻选择器：<code>$(&quot;prev + next&quot;)</code> 匹配所有紧接在<code>prev</code>元素后的<code>next</code>元素。</li>
<li>d.兄弟选择器：<code>$(&quot;prev ~ siblings&quot;)</code> 匹配prev元素之后的所有<code>sibling</code>元素。</li>
</ul>
</li>
</ul>
<h5 id="过滤选择器"><a href="#过滤选择器" class="headerlink" title="过滤选择器"></a>过滤选择器</h5><hr>
<ul>
<li><strong>基本过滤选择</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>说明</th>
<th>返回</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:first</code></td>
<td>匹配找到的第1个元素</td>
<td>单个元素</td>
</tr>
<tr>
<td><code>:last</code></td>
<td>匹配找到的最后一个元素</td>
<td>单个元素</td>
</tr>
<tr>
<td><code>:eq</code></td>
<td>匹配一个给定索引值的元素</td>
<td>单个元素</td>
</tr>
<tr>
<td><code>:even</code></td>
<td>匹配所有索引值为偶数的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>: odd</code></td>
<td>匹配所有索引值为奇数的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:gt(index)</code></td>
<td>匹配所有大于给定索引值的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:lt(index)</code></td>
<td>匹配所有小于给定索引值的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:not</code></td>
<td>去除所有与给定选择器匹配的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:animated</code></td>
<td>选取当前正在执行动画的所有元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>focus</code></td>
<td>选取当前正在获取焦点的元素</td>
<td>集合元素</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>内容过滤选择器</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>描述</th>
<th>返回</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:contains(text)</code></td>
<td>选取含有文本内容为text的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:empty</code></td>
<td>选取不包含子元素获取文本的空元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:has(selector)</code></td>
<td>选择含有选择器所匹配的元素的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:parent</code></td>
<td>选取含有子元素或者文本的元素</td>
<td>集合元素</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>可见过滤选择器</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>描述</th>
<th>返回</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:hidden</code></td>
<td>选择所有不可见的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:visible</code></td>
<td>选取所有可见的元素</td>
<td>集合元素</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>属性过滤选择器</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>说明</th>
<th>返回</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>[attribute]</code></td>
<td>选取拥有此属性的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>[attribute=value]</code></td>
<td>选取属性值为<code>value</code>值的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>[attribue^=value]</code></td>
<td>选取属性的值以<code>value</code>开始的元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>[attribue$=value]</code></td>
<td>选取属性的值以<code>value</code>结束的元素</td>
<td>集合元素</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>子元素过滤选择器</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>说明</th>
<th>返回</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:nth-child(index/even/odd)</code></td>
<td>选取每个父元素下的第index个子元素或者奇偶元素（<code>index</code>从<code>1</code>算起）</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:first-child</code></td>
<td>选取每个元素的第一个子元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:last-child</code></td>
<td>选取每个元素的最后一个子元素</td>
<td>集合元素</td>
</tr>
</tbody>
</table>
<ul>
<li><p><code>:nth-child()</code>选择器是很常用的子元素过滤选择器，如下</p>
<ul>
<li><code>:nth-child(even)</code>选择每个父元素下的索引值是偶数的元素</li>
<li><code>:nth-child(odd)</code>选择每个父元素下的索引值是奇数的元素</li>
<li><code>:nth-child(2)</code>选择每个父元素下的索引值是<code>2</code>的元素</li>
<li><code>:nth-child(3n)</code>选择每个父元素下的索引值是3的倍数的元素 (<code>n</code>从<code>1</code>开始)</li>
</ul>
</li>
<li><p><strong>表单对象属性过滤选择器</strong></p>
</li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>说明</th>
<th>返回</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:enabled</code></td>
<td>选取所有可用元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:disabled</code></td>
<td>选取所有不可用元素</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:checked</code></td>
<td>选取所有被选中的元素（单选框、复选框）</td>
<td>集合元素</td>
</tr>
<tr>
<td><code>:selected</code></td>
<td>选取所有被选中的元素（下拉列表）</td>
<td>集合元素</td>
</tr>
</tbody>
</table>
<ul>
<li><strong>表单选择器</strong></li>
</ul>
<table>
<thead>
<tr>
<th>选择器</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>:input</code></td>
<td>选取所有<code>input</code> <code>textarea</code> <code>select</code> <code>button</code>元素</td>
</tr>
<tr>
<td><code>:text</code></td>
<td>选取所有单行文本框</td>
</tr>
<tr>
<td><code>:password</code></td>
<td>选取所有密码框</td>
</tr>
<tr>
<td><code>:radio</code></td>
<td>选取所有单选框</td>
</tr>
<tr>
<td><code>:checkbox</code></td>
<td>选取所有多选框</td>
</tr>
<tr>
<td><code>:submit</code></td>
<td>选取所有的提交按钮</td>
</tr>
<tr>
<td><code>:image</code></td>
<td>选取所有的图像按钮</td>
</tr>
<tr>
<td><code>:reset</code></td>
<td>选取所有的重置按钮</td>
</tr>
<tr>
<td><code>:button</code></td>
<td>选取所有的按钮</td>
</tr>
<tr>
<td><code>:file</code></td>
<td>选取所有的上传域</td>
</tr>
<tr>
<td><code>:hidden</code></td>
<td>选取所有的不可见元素</td>
</tr>
</tbody>
</table>
<ul>
<li><p><strong>特定位置选择器</strong></p>
<ul>
<li><code>:first</code></li>
<li><code>:last</code></li>
<li><code>:eq(index)</code></li>
</ul>
</li>
<li><p><strong>指定范围选择器</strong></p>
<ul>
<li><code>:even</code></li>
<li><code>:odd</code></li>
<li><code>:gt(index)</code></li>
<li><code>:lt(index)</code></li>
</ul>
</li>
<li><p><strong>排除选择器</strong></p>
<ul>
<li><code>:not</code> 非</li>
</ul>
</li>
</ul>
<h4 id="第三节-选择器优化"><a href="#第三节-选择器优化" class="headerlink" title="第三节 选择器优化"></a>第三节 选择器优化</h4><hr>
<ul>
<li><p>使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，<code>ID</code>选择器速度最快，其次是类型选择器。</p>
<ul>
<li>a. 多用<code>ID</code>选择器</li>
<li>b. 少直接使用<code>class</code>选择器</li>
<li>c. 多用父子关系，少用嵌套关系</li>
<li>d. 缓存<code>jQuery</code>对象</li>
</ul>
</li>
<li><p><strong>使用过滤器</strong></p>
<ul>
<li><code>jQuery</code>提供了<code>2</code>种选择文档元素的方式：选择器和过滤器</li>
<li>a. 类过虑器：根据元素的类属性来进行过滤操作。<ul>
<li><code>hasClass(className)</code>：判断当前<code>jQuery</code>对象中的某个元素是否包含指定类名，包含返回<code>true</code>，不包含返回<code>false</code></li>
</ul>
</li>
<li>b. 下标过滤器：精确选出指定下标元素<ul>
<li><code>eq(index)</code>：获取第<code>N</code>个元素。<code>index</code>是整数值，下标从<code>0</code>开始</li>
</ul>
</li>
<li>c. 表达式过滤器 <ul>
<li><code>filter(expr)/(fn)</code>：筛选出与指定表达式/函数匹配的元素集合。</li>
<li>功能最强大的表达式过滤器，可接收函数参数，也可以是简单的选择器表达式</li>
</ul>
</li>
<li>d. 映射 <code>map(callback)</code>：将一组元素转换成其他数组</li>
<li>e. 清洗 <code>not(expr)</code>：删除与指定表达式匹配的元素</li>
<li>f. 截取 <code>slice(start,end)</code>：选取一个匹配的子集</li>
</ul>
</li>
<li><p><strong>查找</strong></p>
<ul>
<li>向下查找后代元素 <ul>
<li><code>children()</code>:取得所有元素的所有子元素集合（子元素）</li>
<li><code>find()</code>:搜索所有与指定表达式匹配的元素(所有后代元素中查找)</li>
</ul>
</li>
<li>查找兄弟元素 <code>siblings()</code>查找当前元素的兄弟</li>
</ul>
</li>
</ul>
<h4 id="第四节-代理对象属性和样式操作"><a href="#第四节-代理对象属性和样式操作" class="headerlink" title="第四节 代理对象属性和样式操作"></a>第四节 代理对象属性和样式操作</h4><hr>
<ul>
<li><p><strong>代理对象属性和样式操作</strong></p>
<ul>
<li><code>attr</code></li>
<li><code>prop</code>(一般属性值是<code>boolean</code>的值或者不用设置属性值，一般使用)</li>
<li><code>css</code>(最好不用，一般我用来做测试)</li>
<li><code>addClass</code> / <code>removeClass</code></li>
</ul>
</li>
<li><p>操作原生<code>DOM</code>的时候用的方式：一次只能操作一个</p>
<ul>
<li>操作属性：<code>setAttribute</code> / <code>getAttribute</code></li>
<li>操作样式：<code>style.xx = value</code></li>
<li>操作类样式：<code>className=&#39;&#39;</code></li>
<li>获取<code>DOM</code>的子元素<code>children</code>属性</li>
<li><code>DOM</code>里面添加一个子元素<code>appendChild()</code></li>
</ul>
</li>
<li><p>操作<code>jQuery</code>代理对象的时候：批量操作<code>DOM</code>对象(全都是通过方法操作)</p>
</li>
<li><p>操作属性：<code>attr()</code>、<code>prop()</code> </p>
<ul>
<li><code>attr</code>和<code>prop</code>区别：如果属性的值是布尔类型的值 用<code>prop</code>操作 反之<code>attr</code></li>
</ul>
</li>
<li><p>操作样式：<code>css()</code></p>
</li>
<li>操作类样式：<code>addClass()</code> <code>removeClass()</code></li>
<li>操作<code>DOM</code>子元素：<code>children()</code></li>
<li>添加子元素：<code>append()</code></li>
</ul>
<h4 id="第五节-jQuery中DOM操作"><a href="#第五节-jQuery中DOM操作" class="headerlink" title="第五节 jQuery中DOM操作"></a>第五节 jQuery中DOM操作</h4><hr>
<ul>
<li><p><code>DOM</code>是一种与浏览器、平台|语言无关的接口，使用该接口可以轻松的访问 页面中的所有的标准组件</p>
</li>
<li><p><strong><code>DOM</code>操作的分类</strong></p>
<ul>
<li><p><strong><code>DOM Core</code></strong></p>
<ul>
<li><code>DOM core</code>并不专属于<code>JavaScript</code>，任何支持<code>DOM</code>的程序都可以使用</li>
<li><code>JavaScript</code> 中的<code>getElementByID()</code> <code>getElementsByTagName()</code> <code>getAttribute()</code> <code>setAttribute()</code>等方法都是<code>DOM Core</code>的组成部分</li>
</ul>
</li>
<li><p><strong><code>HTML-DOM</code></strong></p>
<ul>
<li><code>HTML -DOM</code>的出现比<code>DOM-Core</code>还要早，它提供一些更简明的标志来描述<code>HTML</code>元素的属性</li>
<li>比如：使用<code>HTML-DOM</code>来获取某元素的<code>src</code>属性的方法<ul>
<li><code>element.src</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>CSS-DOM</code></strong></p>
<ul>
<li>针对<code>CSS</code>的操作。在<code>JavaScript</code>中，主要用于获取和设置<code>style</code>对象的各种属性，通过改变<code>style</code>对象的属性，使网页呈现不同的效果</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>查找节点</strong></p>
<ul>
<li>查找属性节点 <code>attr()</code> 可以获取各属性的值</li>
</ul>
</li>
<li><strong>创建节点</strong><ul>
<li><code>$(html)</code>：根据传递的标记字符串，创建<code>DOM</code>对象</li>
</ul>
</li>
<li><strong>插入节点</strong></li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>append()</code></td>
<td>向每个匹配元素内部追加内容</td>
</tr>
<tr>
<td><code>appendTo()</code></td>
<td>颠倒<code>append()</code>的操作</td>
</tr>
<tr>
<td><code>prepend()</code></td>
<td>向每个匹配元素的内容内部前置内容</td>
</tr>
<tr>
<td><code>prependTo()</code></td>
<td>颠倒<code>prepend()</code>的操作</td>
</tr>
<tr>
<td><code>after()</code></td>
<td>向每个匹配元素之后插入内容</td>
</tr>
<tr>
<td><code>insertAfter()</code></td>
<td>颠倒<code>after()</code>的操作</td>
</tr>
<tr>
<td><code>before()</code></td>
<td>在每个匹配元素之前插入内容</td>
</tr>
<tr>
<td><code>insertBefore()</code></td>
<td>颠倒<code>before()</code>的操作</td>
</tr>
</tbody>
</table>
<ul>
<li><p><strong>删除节点</strong></p>
<ul>
<li>jQuery提供了三种删除节点的方法 <code>remove()</code> <code>detach()</code> <code>empty()</code></li>
<li><strong><code>remove()方法</code></strong><ul>
<li>当某个节点用此方法删除后，该节点所包含的所有后代节点将同时被删除，用<code>remove()</code>方法删除后，还是可以继续使用删除后的引用</li>
</ul>
</li>
<li><strong><code>detach()</code></strong><ul>
<li>和<code>remove()</code>方法一样，也是从<code>DOM</code>中去掉所有匹配的元素，与<code>remove()</code>不同的是，所有绑定的事件、附加的数据等，都会被保留下来</li>
</ul>
</li>
<li><strong><code>empty()</code></strong><ul>
<li><code>empty()</code>方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>复制节点</strong></p>
<ul>
<li>使用<code>clone()</code>方法来完成</li>
<li>在<code>clone()</code>方法中传递一个参数<code>true</code>，同时复制元素中所绑定的事件</li>
</ul>
</li>
<li><p><strong>替换节点</strong></p>
<ul>
<li><code>jQuery</code>提供相应的方法 <code>replaceWidth()</code></li>
</ul>
</li>
<li><p><strong>样式操作</strong></p>
<ul>
<li>获取样式和设置样式 <code>attr()</code></li>
<li>追加样式 <code>addClass()</code></li>
<li>移除样式 <code>removeClass()</code></li>
<li>切换样式 <ul>
<li><code>toggle()</code>方法只要是控制行为上的重复切换（如果元素是显示的，则隐藏；如果元素原来是隐藏的，则显示）</li>
<li><code>toggleClass()</code>方法控制样式上的重复切换（如何类名存在，则删除它，如果类名不存在，则添加它） </li>
</ul>
</li>
<li>判断是否含有某个样式<ul>
<li><code>hasClass()</code>可以用来判断元素是否含有某个<code>class</code>,如有返回<code>true</code> 该方法等价于<code>is()</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>设置和获取HTML、文本和值</strong></p>
<ul>
<li><strong><code>html()</code></strong><ul>
<li>此方法类似<code>JavaScript</code>中<code>innerHTML</code>属性，可以用来读取和设置某个元素中的<code>HTML</code>内容</li>
</ul>
</li>
<li><strong><code>text()</code></strong>方法<ul>
<li>此方法类型<code>JavaScript</code>中<code>innerHTML</code>，用来读取和设置某个元素中的文本内容</li>
</ul>
</li>
<li><strong><code>val()</code></strong>方法<ul>
<li>此方法类似<code>JavaScript</code>中的<code>value</code>属性，用来设置获取元素的值。无论是文本框、下拉列表还是单选框，都可以返回元素的值，如果元素多选，返回一个包含所有选择的值的数组</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>遍历节点</strong></p>
<ul>
<li><strong><code>children()</code></strong>方法<ul>
<li>该方法用来取得匹配元素的子元素集合</li>
<li><code>childre()</code>方法只考虑子元素而不考虑其他后代元素</li>
</ul>
</li>
<li><strong><code>next()</code></strong>方法<ul>
<li>该方法用于取得匹配元素后面紧邻的同辈元素</li>
</ul>
</li>
<li><strong><code>prev()</code></strong>方法<ul>
<li>用于匹配元素前面紧邻的同辈元素</li>
</ul>
</li>
<li><strong><code>siblings()</code></strong>方法<ul>
<li>用于匹配元素前后所有的同辈元素</li>
</ul>
</li>
<li><strong><code>parent()</code></strong>方法<ul>
<li>获得集合中每个 元素的父级元素</li>
</ul>
</li>
<li><strong><code>parents()</code></strong>方法<ul>
<li>获得集合中每个元素的祖先元素</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="CSS-DOM操作"><a href="#CSS-DOM操作" class="headerlink" title="CSS DOM操作"></a>CSS DOM操作</h5><hr>
<ul>
<li><code>CSS DOM</code>技术简单的来说就是读取和设置<code>style</code>对象的各种属性</li>
<li>用<code>css()</code>方法获取元素的样式属性，可以同时设置多个样式属性</li>
<li><strong><code>CSS DOM</code>中关于元素定位有几个常用的方法</strong><ul>
<li><strong><code>offset()</code></strong>方法<ul>
<li>它的作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性，即<code>top</code>和<code>left</code>，他只对可见元素有效 </li>
</ul>
</li>
<li><strong><code>position()</code></strong>方法<ul>
<li>获取相对于最近的一个<code>position()</code>样式属性设置为<code>relative</code>或者<code>absolute</code>的祖父节点的相对偏移，与<code>offset()</code>一样，他返回的对象也包括两个属性，即<code>top</code>和<code>left</code></li>
</ul>
</li>
<li><strong><code>scrollTop()</code></strong>方法和<strong><code>scrollLeft</code></strong>方法<ul>
<li>这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离</li>
</ul>
</li>
<li><strong>一张图总结以上的位置关系(项目中很常用-必须要弄清楚)</strong></li>
</ul>
</li>
</ul>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery4.jpg" alt><br><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery5.jpg" alt><br><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery6.jpg" alt><br><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery7.jpg" alt><br><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery7.jpg" alt></p>
<h4 id="第六节-jQuery动画"><a href="#第六节-jQuery动画" class="headerlink" title="第六节 jQuery动画"></a>第六节 jQuery动画</h4><hr>
<h5 id="回顾上节"><a href="#回顾上节" class="headerlink" title="回顾上节"></a>回顾上节</h5><hr>
<ul>
<li>操作DOM<ul>
<li>a.什么是<code>DOM</code>：<code>Document Object Model</code>缩写，文档对象模型</li>
<li>b.理解页面的树形结构</li>
<li>c.什么是节点：是DOM结构中最小单元，包括元素、属性、文本、文档等。</li>
</ul>
</li>
</ul>
<h6 id="一、创建节点"><a href="#一、创建节点" class="headerlink" title="一、创建节点"></a>一、创建节点</h6><hr>
<ul>
<li>1.创建元素<ul>
<li>语法：<code>document.createElement(name)</code>;</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(div);</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>$(html)</code>：根据传递的标记字符串，创建DOM对象</p>
</li>
<li><p>2.创建文本</p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line"><span class="keyword">var</span> txt = <span class="built_in">document</span>.createTextNode(<span class="string">"DOM"</span>);</span><br><span class="line">div.appendChild(txt);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(div);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> $div = = $(<span class="string">"&lt;div&gt;DOM&lt;/div&gt;"</span>);</span><br><span class="line">$(body).append($div);</span><br><span class="line"><span class="string">``</span><span class="string">`		</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">- 3.设置属性</span></span><br><span class="line"><span class="string">	- 语法：`</span>e.setAttrbute(name,value)<span class="string">`</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">`</span><span class="string">``</span>javascript</span><br><span class="line"><span class="keyword">var</span> div = <span class="built_in">document</span>.createElement(<span class="string">"div"</span>);</span><br><span class="line"><span class="keyword">var</span> txt = <span class="built_in">document</span>.createTextNode(<span class="string">"DOM"</span>);</span><br><span class="line">div.appendChild(txt);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(div);</span><br><span class="line">div.setAttribute(<span class="string">"title"</span>,<span class="string">"盒子"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> $div = = $(<span class="string">"&lt;div title='盒子'&gt;DOM&lt;/div&gt;"</span>);</span><br><span class="line">$(body).append($div);</span><br></pre></td></tr></table></figure>
<h6 id="二、插入内容"><a href="#二、插入内容" class="headerlink" title="二、插入内容"></a>二、插入内容</h6><hr>
<ul>
<li><p>内部插入</p>
<ul>
<li>向元素最后面插入节点：<ul>
<li><code>append()</code>:向每个匹配的元素内部追加内容</li>
<li><code>appendTo()</code>:把所有匹配的元素追加到指定元素集合中，<code>$(&quot;A&quot;).append(&quot;B&quot;)</code>等效 <code>$(&quot;B&quot;).appendTo(&quot;A&quot;)</code></li>
</ul>
</li>
<li>向元素最前面插入节点：<ul>
<li><code>prepend（）</code>：把每个匹配的元素内部前置内容</li>
<li><code>prependTo（）</code>：把所有匹配的元素前置到另一个指定的元素集合中,<code>$(&quot;A&quot;).prepend(&quot;B&quot;)</code> 等效 <code>$(&quot;B&quot;).prependTo(&quot;A&quot;)</code></li>
</ul>
</li>
</ul>
</li>
<li><p>外部插入</p>
<ul>
<li><code>after()</code>:在每个匹配的元素之后插入内容</li>
<li><code>before()</code>：在每个匹配想元素之前插入内容</li>
<li><code>insertAfter()</code>：将所有匹配的元素插入到另一个指定的元素集合后面，<code>$A.insert($B)</code> 等效<code>$B.insertAfter($A);</code></li>
<li><code>insertBefore()</code>：将所有匹配的元素插入到另一个指定的元素集合前面 <code>$A.before($B)</code> 等效 <code>$B.insertBefore($A)</code>;</li>
</ul>
</li>
</ul>
<h6 id="三、删除内容"><a href="#三、删除内容" class="headerlink" title="三、删除内容"></a>三、删除内容</h6><hr>
<ul>
<li>移除<ul>
<li><code>remove()</code>:从<code>DOM</code>中删除所有匹配元素</li>
</ul>
</li>
<li>清空<ul>
<li><code>empty()</code>:删除匹配的元素集合中所有子节点内容</li>
</ul>
</li>
</ul>
<h6 id="四、克隆内容：创建指定节点副本"><a href="#四、克隆内容：创建指定节点副本" class="headerlink" title="四、克隆内容：创建指定节点副本"></a>四、克隆内容：创建指定节点副本</h6><hr>
<ul>
<li><code>clone()</code><ul>
<li>注意：若<code>clone（true）</code>则是包括克隆元素的属性，事件等</li>
</ul>
</li>
</ul>
<h6 id="五、替换内容"><a href="#五、替换内容" class="headerlink" title="五、替换内容"></a>五、替换内容</h6><hr>
<ul>
<li><code>replaceWith()</code>:将所有匹配的元素替换成指定的元素</li>
<li><code>replaceAll()</code>:用匹配的元素替换掉指定元素</li>
</ul>
<ul>
<li>注意：两者效果一致，只是语法不同 <code>$A.replaceAll($B)</code>等效于 <code>$B.replaceWhith($A)</code>;</li>
</ul>
<h5 id="本节新知识"><a href="#本节新知识" class="headerlink" title="本节新知识"></a>本节新知识</h5><hr>
<ul>
<li><code>JavaScrip</code>t语言本身不支持动画设计，必须通过改变<code>CSS</code>来实现动画效果</li>
</ul>
<p><strong>显隐动画</strong></p>
<ul>
<li><p><code>show()</code>:显示 <code>hide()</code>:隐藏</p>
<ul>
<li>原理：<code>hide()</code>通过改变元素的高度宽度和不透明度，直到这三个属性值到<code>0</code></li>
<li><code>show()</code>从上到下增加元素的高度，从左到右增加元素宽度，从<code>0</code>到<code>1</code>增加透明度，直至内容完全可见</li>
<li>参数：<ul>
<li><code>show(speed,callback)</code><ul>
<li><code>speed</code>: 字符串或数字，表示动画将运行多久（<code>slow=0.6</code>/<code>normal=0.4</code>/<code>fast=0.2</code>）</li>
<li><code>callback</code>: 动画完成时执行的方法</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p>显示和隐藏式一对密不可分的动画形式</p>
</li>
<li><p><strong>显隐切换</strong></p>
<ul>
<li><code>toggle()</code>:切换元素的可见状态<ul>
<li>原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将<code>display</code>设置为<code>none</code></li>
<li>参数：<ul>
<li><code>toggle(speed)</code></li>
<li><code>toggle(speed,callback)</code></li>
<li><code>toggle(boolean)</code><ul>
<li><code>speed</code>: 字符串或数字，表示动画将运行多久（<code>slow=0.6</code>/<code>normal=0.4</code>/<code>fast=0.2</code>）</li>
<li><code>easing</code>： 使用哪个缓冲函数来过渡的字符串(<code>linear</code>/<code>swing</code>)</li>
<li><code>callback</code>： 动画完成时执行的方法</li>
<li><code>boolean</code>:<code>true</code>为显示 <code>false</code>为隐藏</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p><strong>滑动</strong></p>
<ul>
<li><p><strong>显隐滑动效果</strong></p>
<ul>
<li><code>slideDown()</code>:滑动隐藏</li>
<li><p><code>slidUp()</code>:滑动显示</p>
</li>
<li><p>参数:</p>
<ul>
<li><code>slideDown(speed,callback)</code></li>
<li><code>slidUp(speed,callback)</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>显隐切换滑动</strong></p>
<ul>
<li><code>slideToggle()</code>:显隐滑动切换</li>
<li>参数:<ul>
<li><code>slidUp(speed,callback)</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<p><strong>渐变：通过改变不透明度</strong></p>
<ul>
<li><p><strong>淡入淡出</strong></p>
<ul>
<li><code>fadeIn()</code></li>
<li><p><code>fadeOut()</code></p>
</li>
<li><p>参数：</p>
<ul>
<li><code>fadeIn(speed,callback)</code></li>
<li><code>fadeOut(speed,callback)</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>设置淡出透明效果</strong></p>
<ul>
<li><p><code>fadeTo()</code>⁭：以渐进的方式调整到指定透明度</p>
</li>
<li><p>参数：</p>
<ul>
<li><code>fadeTo(speed,opacity,callback)</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong>渐变切换:结合<code>fadeIn</code>和<code>fadeOut</code></strong></p>
<ul>
<li><p><code>fadeToggle()</code></p>
</li>
<li><p>参数:</p>
<ul>
<li><code>fadeOut(speed,callback)</code></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><strong>自定义动画：<code>animate()</code></strong><ul>
<li>注意：在使用<code>animate</code>方法之前，为了影响该元素的<code>top</code>  <code>left</code> <code>bottom</code>  <code>right</code>样式属性，必须先把元素的<code>position</code>样式设置为<code>relative</code>或者<code>absolute</code></li>
<li><strong>停止元素的动画</strong><ul>
<li>很多时候需要停止匹配正在进行的动画，需要使用stop() </li>
<li><code>stop()</code>语法结构：<code>stop([clearQueue],[gotoEnd]);</code><ul>
<li>都是可选参数，为布尔值</li>
<li>如果直接使用<code>stop()</code>方法，会立即停止当前正在进行的动画</li>
</ul>
</li>
</ul>
</li>
<li><strong>判断元素是否处于动画状态</strong><ul>
<li>如果不处于动画状态，则为元素添加新的动画，否则不添加<br><code>if(!$(element).is(&quot;:animated&quot;)){ //判断元素是否处于动画状态}</code></li>
<li>这个方法在<code>animate</code>动画中经常被用到，需要注意</li>
</ul>
</li>
<li><strong>延迟动画</strong><ul>
<li>在动画执行过程中，如果你想对动画进行延迟操作，那么使用<code>delay()</code></li>
</ul>
</li>
</ul>
</li>
<li><p>用<code>animate</code>模拟<code>show()</code>:</p>
<ul>
<li><code>show</code>: 表示由透明到不透明</li>
<li><code>toggle</code>: 切换</li>
<li><code>hide</code>:表示由显示到隐藏</li>
</ul>
</li>
<li><p><strong>动画方法总结</strong></p>
</li>
</ul>
<table>
<thead>
<tr>
<th>方法名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>hide()</code>和<code>show()</code></td>
<td>同时修改多个样式属性即高度和宽度和不透明度</td>
</tr>
<tr>
<td><code>fadeIn()</code>和<code>fadeOut()</code></td>
<td>只改变不透明度</td>
</tr>
<tr>
<td><code>slideUp()</code>和<code>slideDown()</code></td>
<td>只改变高度</td>
</tr>
<tr>
<td><code>fadeTo()</code></td>
<td>只改变不透明度</td>
</tr>
<tr>
<td><code>toggle()</code></td>
<td>用来代替<code>show()</code>和<code>hide()</code>方法，所以会同时修改多个属性即高度、宽度和不透明度</td>
</tr>
<tr>
<td><code>slideToggle()</code></td>
<td>用来代替<code>slideUp</code>和<code>slideDown()</code>方法，所以只能改变高度</td>
</tr>
<tr>
<td><code>fadeToggle()</code></td>
<td>用来代替<code>fadeIn()</code>和<code>fadeOut</code>方法，只能改变不透明度</td>
</tr>
<tr>
<td><code>animate()</code></td>
<td>属于自定义动画，以上各种动画方法都是调用了<code>animate</code>方法。此外，用<code>animate</code>方法还能自定义其他的样式属性，例如：<code>left</code> <code>marginLeft `</code>scrollTop`等</td>
</tr>
</tbody>
</table>
<h4 id="第七节-jQuery中的事件"><a href="#第七节-jQuery中的事件" class="headerlink" title="第七节 jQuery中的事件"></a>第七节 jQuery中的事件</h4><hr>
<ul>
<li><p><strong>事件对象的属性</strong></p>
<ul>
<li><code>event.type</code>：获取事件的类型</li>
<li><code>event.target</code>:获取到触发事件的元素</li>
<li><code>event.preventDefault</code>方法 阻止默认事件行为</li>
<li><code>event.stopPropagation()</code>阻止事件的冒泡</li>
<li><p><code>keyCode</code>：只针对于<code>keypress</code>事件，获取键盘键数字 按下回车，<code>13</code></p>
</li>
<li><p><code>event.pageX / event.pageY</code> 获取到光标相对于页面的<code>x</code>坐标和<code>y</code>坐标</p>
<ul>
<li>如果没有<code>jQuery</code>，在IE浏览器中用<code>event.x</code> / <code>event.y</code>;在<code>Firefox</code>浏览器中用<code>event.pageX</code> / <code>event.pageY</code>。如果页面上有滚动条还要加上滚动条的宽度和高度</li>
</ul>
</li>
<li><p><code>event.clientX</code>：光标对于浏览器窗口的水平坐标  浏览器</p>
</li>
<li><p><code>event.clientY</code>：光标对于浏览器窗口的垂直坐标</p>
</li>
<li><p><code>event.screenX</code>：光标对于电脑屏幕的水平坐标    电脑屏幕  </p>
</li>
<li><code>event.screenY</code>：光标对于电脑屏幕的水平坐标 </li>
<li><code>event.which</code> 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键，在键盘事件中的按键 <code>1</code>代表左键  <code>2</code>代表中键  <code>3</code>代表右键</li>
</ul>
</li>
<li><p><strong>事件冒泡</strong></p>
<ul>
<li>什么是冒泡<ul>
<li>在页面上可以有多个事件，也可以多个元素影响同一个元素</li>
<li>从里到外</li>
<li>嵌套关系</li>
<li>相同事件</li>
<li>其中的某一父类没有相同事件时,继续向上查找</li>
</ul>
</li>
<li><strong>停止事件冒泡</strong><ul>
<li>停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行</li>
<li>在<code>jQuery</code>中提供了<strong><code>stopPropagation()</code></strong>方法</li>
</ul>
</li>
<li><strong>阻止默认行为</strong><ul>
<li>网页中元素有自己的默认行为，例如：单击超链接后会跳转、单击提交后表单会提交，有时需要阻止元素的默认行为</li>
<li>在<code>jQuery</code>中提供了<code>preventDefault()</code>方法来阻止元素的默认行为</li>
</ul>
</li>
<li><strong>事件捕获</strong><ul>
<li>事件捕获和冒泡是相反的过程，事件捕获是从最顶端往下开始触发</li>
<li>并非所有的浏览器都支持事件捕获，并且这个缺陷无法通过<code>JavaScript</code>来修复。<code>jQuery</code>不支持事件捕获，如需要用事件捕获，要用原生的<code>JavaScript</code></li>
</ul>
</li>
</ul>
</li>
<li><p><strong><code>bind()</code>;绑定</strong></p>
<ul>
<li><p>为匹配元素绑定处理方法</p>
</li>
<li><p>需要给一个元素添加多个事件 ，事件执行一样时候</p>
</li>
<li><code>one()</code>：只执行一次         </li>
</ul>
</li>
</ul>
<ul>
<li><strong>绑定特定事件类型方法</strong>：</li>
</ul>
<table>
<thead>
<tr>
<th>分类</th>
<th>方法名称</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>页面载入</td>
<td><code>ready(fn)</code></td>
<td>当<code>DOM</code>载入就绪可以绑定一个要执行的函数</td>
</tr>
<tr>
<td>事件绑定</td>
<td><code>blind(type,[data],fn)</code></td>
<td>为每个匹配元素的特定事件绑定一个事件处理函数</td>
</tr>
<tr>
<td>事件绑定</td>
<td><code>unblind()</code></td>
<td>解除绑定</td>
</tr>
<tr>
<td>事件绑定</td>
<td><code>on(events,[,selector[,]data],handler)</code></td>
<td>在选择元素上绑定一个或者多个事件处理函数</td>
</tr>
<tr>
<td>事件绑定</td>
<td><code>off()</code></td>
<td>移除<code>on</code>绑定的事件</td>
</tr>
<tr>
<td>事件绑定</td>
<td><code>delegate(selector,eventType,handler)</code></td>
<td>为所有选择匹配元素附加一个或多个事件处理函数</td>
</tr>
<tr>
<td>事件绑定</td>
<td><code>undelegate()</code></td>
<td>移除绑定</td>
</tr>
<tr>
<td>事件动态</td>
<td><code>live(type,fn)</code></td>
<td>对动态生成的元素进行事件绑定</td>
</tr>
<tr>
<td>事件动态</td>
<td><code>die(type,fn)</code></td>
<td>移除<code>live()</code>绑定的事件</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>hover()</code></td>
<td>鼠标移入移出</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>toggle(fn1,fn2,[fn3],[fn4])</code></td>
<td>每单击后依次调用函数</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>blur(fn)</code></td>
<td>触发每一个匹配元素的<code>blur</code>事件</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>change()</code></td>
<td>触发每一个匹配元素的<code>change</code>事件</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>click()</code></td>
<td>触发每一个匹配元素的<code>click</code>事件</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>focus()</code></td>
<td>触发每一个匹配元素的<code>focus</code>事件</td>
</tr>
<tr>
<td>交互事件</td>
<td><code>submit()</code></td>
<td>触发每一个匹配元素的<code>submit</code>事件</td>
</tr>
<tr>
<td>键盘事件</td>
<td><code>keydown()</code></td>
<td>触发每一个匹配元素的<code>keydown</code>事件</td>
</tr>
<tr>
<td>键盘事件</td>
<td><code>keypress()</code></td>
<td>触发每一个匹配元素的<code>keypress</code>事件</td>
</tr>
<tr>
<td>键盘事件</td>
<td><code>keyup()</code></td>
<td>触发每一个匹配元素的keyup事件</td>
</tr>
<tr>
<td>鼠标事件</td>
<td><code>mousedown(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
<tr>
<td>鼠标事件</td>
<td><code>mouseenter(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
<tr>
<td>键盘事件</td>
<td><code>mouseleave(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
<tr>
<td>键盘事件</td>
<td><code>mouseout(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
<tr>
<td>键盘事件</td>
<td><code>mouseover(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
<tr>
<td>窗口操作</td>
<td><code>resize(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
<tr>
<td>窗口操作</td>
<td><code>scroll(fn)</code></td>
<td>绑定一个处理函数</td>
</tr>
</tbody>
</table>
<h4 id="第八节-jQuery与Ajax"><a href="#第八节-jQuery与Ajax" class="headerlink" title="第八节 jQuery与Ajax"></a>第八节 jQuery与Ajax</h4><hr>
<ul>
<li><strong>Ajax</strong>简介 :<ul>
<li><code>Asynchronous Javascript And XML</code> （异步的<br><code>JavaScript</code>和<code>XML</code>）</li>
<li>它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体</li>
</ul>
</li>
<li><strong><code>Ajax</code>优势与不足</strong><ul>
<li><strong><code>Ajax</code>优势</strong><ul>
<li>优秀的用户体验<ul>
<li>这是<code>Ajax</code>下最大的有点，能在不刷新整个页面前提下更新数据</li>
</ul>
</li>
<li>提高<code>web</code>程序的性能<ul>
<li>与传统模式相比，<code>Ajax</code>模式在性能上最大的区别在于传输数据的方式，在传统模式中，数据的提交时通过表单来实现的。<code>Ajax</code>模式只是通过<code>XMLHttpRequest</code>对象向服务器提交希望提交的数据，即按需发送</li>
</ul>
</li>
<li>减轻服务器和带宽的负担<ul>
<li><code>Ajax</code>的工作原理相当于在用户和服务器之间加了一个中间层，似用户操作与服务器响应异步化。它在客户端创建<code>Ajax</code>引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和带宽的负担</li>
</ul>
</li>
</ul>
</li>
<li><strong>Ajax的不足</strong><ul>
<li>浏览器对<code>XMLHttpRequest</code>对象的支持度不足</li>
<li>破坏浏览器前进、后退按钮的正常功能</li>
<li>对搜索引擎的支持的不足</li>
<li>开发和调试工具的缺乏</li>
</ul>
</li>
</ul>
</li>
</ul>
<h5 id="创建一个Ajax请求"><a href="#创建一个Ajax请求" class="headerlink" title="创建一个Ajax请求"></a>创建一个Ajax请求</h5><hr>
<ul>
<li><p><code>Ajax</code>的核心是<code>XMLHttpRequest</code>对象，它是<code>Ajax</code>实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成</p>
</li>
<li><p><strong>创建<code>ajax</code>对象 <code>var xhr = new XMLHttpRequest();</code></strong></p>
</li>
<li><p><strong>准备发送请求</strong></p>
<ul>
<li><p><strong><code>get</code> / <code>post</code></strong></p>
<ul>
<li><strong><code>get</code></strong><ul>
<li>传递的数据放在<code>URL</code>后面</li>
<li>中文编码 <code>encodeURI( &#39;&#39; )</code>;</li>
<li>缓存 在数据后面加上随机数或者日期对象或者……</li>
</ul>
</li>
<li><p><strong><code>post</code></strong></p>
<ul>
<li>传递的数据放在<code>send()</code>里面，并且一定要规定数据格式</li>
<li>没有缓存问题</li>
</ul>
</li>
<li><p><code>form</code>表单中:</p>
<ul>
<li><code>action</code>:<ul>
<li><code>method</code>: (默认是<code>get</code>)</li>
<li><code>get</code>: 会在<code>url</code>里面以 <code>name=value</code> , 两个数据之间用 <code>&amp;</code> 连接</li>
</ul>
</li>
<li><code>post</code>:</li>
</ul>
</li>
<li><code>enctype</code>: <code>&quot;application/x-www-form-urlencoded&quot;</code></li>
</ul>
</li>
<li><p><code>url</code></p>
</li>
<li><p>是否异步</p>
<ul>
<li>同步(<code>false</code>)：阻塞</li>
<li>异步(<code>true</code>)：非阻塞</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>正式发送请求</strong></p>
</li>
<li><p><strong><code>ajax</code>请求处理过程</strong></p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span> (xhr.readyState == <span class="number">4</span>)</span><br><span class="line">	&#123;</span><br><span class="line">		alert( xhr.responseText );</span><br><span class="line">	&#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<ul>
<li><p><code>onreadystatechange</code> ：当处理过程发生变化的时候执行下面的函数</p>
</li>
<li><p><code>readyState</code> ：<code>ajax</code>处理过程</p>
<ul>
<li>0：请求未初始化（还没有调用 <code>open()</code>）。</li>
<li>1：请求已经建立，但是还没有发送（还没有调用 <code>send()</code>）。</li>
<li>2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。</li>
<li>3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。</li>
<li>4：响应已完成；您可以获取并使用服务器的响应了。</li>
</ul>
</li>
<li><p><code>responseText</code> ：请求服务器返回的数据存在该属性里面</p>
</li>
<li><code>status</code> : <code>http</code>状态码</li>
</ul>
<p><img src="http://7xq6al.com1.z0.glb.clouddn.com/jquery9.png" alt="HTTP状态码"></p>
<ul>
<li>案例：<code>ajax</code>封装案例</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//ajax请求后台数据</span></span><br><span class="line"><span class="keyword">var</span> btn =  <span class="built_in">document</span>.getElementsByTagName(<span class="string">"input"</span>)[<span class="number">0</span>];</span><br><span class="line">btn.onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	</span><br><span class="line">	ajax(&#123;<span class="comment">//json格式</span></span><br><span class="line">		type:<span class="string">"post"</span>,</span><br><span class="line">		url:<span class="string">"post.php"</span>,</span><br><span class="line">		data:<span class="string">"username=poetries&amp;pwd=123456"</span>,</span><br><span class="line">		asyn:<span class="literal">true</span>,</span><br><span class="line">		success:<span class="function"><span class="keyword">function</span>(<span class="params">data</span>)</span>&#123;</span><br><span class="line">			<span class="built_in">document</span>.write(data);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//封装ajax</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params">aJson</span>)</span>&#123;</span><br><span class="line">	<span class="keyword">var</span> ajx = <span class="literal">null</span>;</span><br><span class="line">	<span class="keyword">var</span> type = aJson.type || <span class="string">"get"</span>;</span><br><span class="line">	<span class="keyword">var</span> asyn = aJson.asyn || <span class="literal">true</span>;</span><br><span class="line">	<span class="keyword">var</span> url = aJson.url;		<span class="comment">// url 接收 传输位置</span></span><br><span class="line">	<span class="keyword">var</span> success = aJson.success;<span class="comment">// success 接收 传输完成后的回调函数</span></span><br><span class="line">	<span class="keyword">var</span> data = aJson.data || <span class="string">''</span>;<span class="comment">// data 接收需要附带传输的数据</span></span><br><span class="line">	</span><br><span class="line">	<span class="keyword">if</span>(<span class="built_in">window</span>.XMLHttpRequest)&#123;<span class="comment">//兼容处理</span></span><br><span class="line">		ajx = <span class="keyword">new</span> XMLHttpRequest();<span class="comment">//一般浏览器</span></span><br><span class="line">	&#125;<span class="keyword">else</span></span><br><span class="line">	&#123;</span><br><span class="line">		ajx = <span class="keyword">new</span> ActiveXObject(<span class="string">"Microsoft.XMLHTTP"</span>);<span class="comment">//IE6+</span></span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">if</span> (type == <span class="string">"get"</span> &amp;&amp; data)</span><br><span class="line">	&#123;</span><br><span class="line">		url +=<span class="string">"/?"</span>+data+<span class="string">"&amp;"</span>+<span class="built_in">Math</span>.random();</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//初始化ajax请求</span></span><br><span class="line">	ajx.open( type , url , asyn );</span><br><span class="line">	<span class="comment">//规定传输数据的格式</span></span><br><span class="line">	ajx.setRequestHeader(<span class="string">'content-type'</span>,<span class="string">'application/x-www-form-urlencoded'</span>);</span><br><span class="line">	<span class="comment">//发送ajax请求（包括post数据的传输）</span></span><br><span class="line">	type == <span class="string">"get"</span> ?ajx.send():ajx.send(aJson.data);</span><br><span class="line">	</span><br><span class="line">	<span class="comment">//处理请求</span></span><br><span class="line">	ajx.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params">aJson</span>)</span>&#123;</span><br><span class="line">		</span><br><span class="line">	<span class="keyword">if</span>(ajx.readState == <span class="number">4</span>)&#123;</span><br><span class="line">			</span><br><span class="line">		<span class="keyword">if</span> (ajx.status == <span class="number">200</span> &amp;&amp; ajx.status&lt;<span class="number">300</span>)<span class="comment">//200是HTTP 请求成功的状态码</span></span><br><span class="line">		&#123;</span><br><span class="line">			<span class="comment">//请求成功处理数据</span></span><br><span class="line">			success &amp;&amp; success(ajx.responseText);</span><br><span class="line">		&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">			alert(<span class="string">"请求出错"</span>+ajx.status);</span><br><span class="line">			</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">		</span><br><span class="line">	&#125;;</span><br></pre></td></tr></table></figure>
<h5 id="jQuery中的Ajax-补充部分–来自锋利的jQuery"><a href="#jQuery中的Ajax-补充部分–来自锋利的jQuery" class="headerlink" title="jQuery中的Ajax  [补充部分–来自锋利的jQuery]"></a>jQuery中的Ajax  [补充部分–来自锋利的jQuery]</h5><hr>
<p><code>jquery</code>对<code>Ajax</code>操作进行了封装，在<code>jquery</code>中的<code>$.ajax()</code>方法属于最底层的方法，第<code>2</code>层是<code>load()</code>、<code>$.get()</code>、<code>$.post();</code>第<code>3</code>层是<code>$.getScript()</code>、<code>$.getJSON()</code>，第<code>2</code>层使用频率很高 </p>
<h6 id="load-方法"><a href="#load-方法" class="headerlink" title="load()方法"></a><code>load()</code>方法</h6><hr>
<ul>
<li><code>load()</code>方法是<code>jquery</code>中最简单和常用的<code>ajax</code>方法，能载入远程<code>HTML</code>代码并插入<code>DOM</code>中 结构为：<code>load(url,[data],[callback])</code><ul>
<li>使用<code>url</code>参数指定选择符可以加载页面内的某些元素 <code>load</code>方法中<code>url</code>语法：<code>url selector</code> 注意：<code>url</code>和选择器之间有一个空格</li>
</ul>
</li>
<li>传递方式<ul>
<li><code>load()</code>方法的传递方式根据参数<code>data</code>来自动指定，如果没有参数传递，则采用<code>GET</code>方式传递，反之，采用<code>POST</code></li>
</ul>
</li>
<li>回调参数<ul>
<li>必须在加载完成后才执行的操作，该函数有三个参数 分别代表请求返回的内容、请求状态、<code>XMLHttpRequest</code>对象</li>
<li>只要请求完成，回调函数就会被触发</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"#testTest"</span>).load(<span class="string">"test.html"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">responseText,textStatus,XMLHttpRequest</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//respnoseText 请求返回的内容</span></span><br><span class="line">    <span class="comment">//textStatus 请求状态 ：sucess、error、notmodified、timeout</span></span><br><span class="line">    <span class="comment">//XMLHttpRequest </span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li><strong>load方法参数</strong></li>
</ul>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td><code>String</code></td>
<td>请求<code>HTML</code>页面的<code>URL</code>地址</td>
</tr>
<tr>
<td><code>data(可选)</code></td>
<td><code>Object</code></td>
<td>发送至服务器的<code>key</code> / <code>value</code>数据</td>
</tr>
<tr>
<td><code>callback(可选)</code></td>
<td><code>Function</code></td>
<td>请求完成时的回调函数，无论是请求成功还是失败</td>
</tr>
</tbody>
</table>
<h6 id="get-和-post-方法"><a href="#get-和-post-方法" class="headerlink" title="$.get()和$.post()方法"></a>$.get()和$.post()方法</h6><hr>
<p><code>load()</code>方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用<code>$.get()</code>和<code>$.post()</code>或<code>$.ajax()</code>方法</p>
<ul>
<li><p>注意：<code>$.get()</code>和<code>$.post()</code>方法是<code>jquery</code>中的全局函数</p>
</li>
<li><p><strong>$.get()方法</strong></p>
<ul>
<li><code>$.get()</code>方法使用<code>GET</code>方式来进行异步请求</li>
<li>结构为：<code>$.get(url,[data],callback,type)</code><ul>
<li>如果服务器返回的内容格式是<code>xml</code>文档，需要在服务器端设置<code>Content-Type</code>类型 代码如下：<code>header(&quot;Content-Type:text/xml:charset=utf-8&quot;)</code> //<code>php</code></li>
</ul>
</li>
</ul>
</li>
<li><strong><code>$.get()</code>方法参数解析</strong></li>
</ul>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td><code>String</code></td>
<td>请求<code>HTML</code>页的地址</td>
</tr>
<tr>
<td><code>data(可选)</code></td>
<td><code>Object</code></td>
<td>发送至服务器的<code>key</code>/ <code>value</code> 数据会作为<code>QueryString</code>附加到请求URL中</td>
</tr>
<tr>
<td><code>callback(可选)</code></td>
<td><code>Function</code></td>
<td>载入成功的回调函数（只有当<code>Response</code>的返回状态是success才调用该方法）</td>
</tr>
<tr>
<td><code>type(可选)</code></td>
<td><code>String</code></td>
<td>服务器返回内容的格式，包括<code>xml</code>、<code>html</code>、<code>script</code>、<code>json</code>、<code>text</code>和<code>_default</code></td>
</tr>
</tbody>
</table>
<ul>
<li><p><strong>$.post()方法</strong></p>
<ul>
<li>它与<code>$.get()</code>方法的结构和使用方式相同，有如下区别<ul>
<li><code>GET</code>请求会将参数跟张乃URL后进行传递，而<code>POST</code>请求则是作为<code>Http</code>消息的实体内容发送给web服务器，在<code>ajax</code>请求中，这种区别对用户不可见<ul>
<li><code>GET</code>方式对传输数据有大小限制（通常不能大于<code>2KB</code>），而使用<code>POST</code>方式传递的数据量要比<code>GET</code>方式大得多（理论不受限制）</li>
<li><code>GET</code>方式请求的数据会被浏览器缓存起来，因此其他人可以从浏览器的历史纪录中读取这些数据，如：账号、密码。在某种情况下，<code>GET</code>方式会带来严重的安全问题，而<code>POST</code>相对来说可以避免这些问题</li>
<li><code>GET</code>和<code>POST</code>方式传递的数据在服务端的获取也不相同。在<code>PHP</code>中，<code>GET</code>方式用<code>$_GET[]</code>获取；<code>POST</code>方式用<code>$_POST[]</code>获取;两种方式都可用<code>$_REQUEST[]</code>来获取 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>总结</strong></p>
<ul>
<li>使用<code>load()</code>、<code>$.get()</code>和<code>$.post()</code>方法完成了一些常规的<code>Ajax</code>程序，如果还需要复杂的<code>Ajax</code>程序，就需要用到<code>$.ajax()</code>方式</li>
</ul>
</li>
</ul>
<h6 id="ajax-方法"><a href="#ajax-方法" class="headerlink" title="$.ajax()方法"></a>$.ajax()方法</h6><hr>
<ul>
<li><code>$.ajax()</code>方法是<code>jquery</code>最底层的<code>Ajax</code>实现，它的结构为<code>$.ajax(options)</code></li>
<li>该方法只有一个参数，但在这个对象里包含了<code>$.ajax()</code>方式所需要的请求设置以及回调函等信息，参数以<code>key</code> / <code>value</code>存在，所有参数都是可选的</li>
<li><strong>$.ajax()方式常用参数解析</strong></li>
</ul>
<table>
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>url</code></td>
<td><code>String</code></td>
<td>(默认为当前页地址)发送请求的地址</td>
</tr>
<tr>
<td><code>type</code></td>
<td><code>String</code></td>
<td>请求方式（<code>POST</code>或<code>GET</code>）默认为<code>GET</code></td>
</tr>
<tr>
<td><code>timeout</code></td>
<td><code>Number</code></td>
<td>设置请求超时时间（毫秒）</td>
</tr>
<tr>
<td><code>dataType</code></td>
<td><code>String</code></td>
<td>预期服务器返回的类型。可用的类型如下<br><br> <strong>xml</strong>:返回<code>XML</code>文档，可用<code>jquery</code>处理<br><strong>html</strong>:返回纯文本的<code>HTML</code>信息，包含的<code>script</code>标签也会在插入<code>DOM</code>时执行<br><strong>script</strong>：返回纯文本的<code>javascript</code>代码。不会自动缓存结果，除非设置<code>cache</code>参数。注意：在远程请求时，所有的<code>POST</code>请求都将转为<code>GET</code>请求<br><strong>json</strong>:返回<code>JSON</code>数据<br><strong>jsonp</strong>:<code>JSONP</code>格式，使用<code>jsonp</code>形式调用函数时，例如：<code>myurl?call back=?,jquery</code>将自动替换后一个<code>？</code>为正确的函数名，以执行回调函数<br><strong>text</strong>:返回纯文本字符串</td>
</tr>
<tr>
<td><code>beforeSend</code></td>
<td><code>Function</code></td>
<td>发送请求前可以修改<code>XMLHttpRequest</code>对象的函数，例如添加自定义<code>HTTP</code>头。在<code>beforeSend</code>中如果返回<code>false</code>可以取消本次<code>Ajax</code>请求。<code>XMLHttpRequest</code>对象是唯一的参数<br> function(XMLHttpRequest){<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code>this</code>;//调用本次<code>Ajax</code>请求时传递的<code>options</code>参数<br>}</td>
</tr>
<tr>
<td><code>complete</code></td>
<td><code>Function</code></td>
<td>请求完成后的回调函数（请求成功或失败时都调用）<br> 参数：<code>XMLHttpRequest</code>对象和一个描述成功请求类型的字符串<br>function(XMLHttpRequest,textStatus){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code>this</code>;//调用本次Ajax请求时传递的<code>options</code>参数<br>}</td>
</tr>
<tr>
<td><code>success</code></td>
<td><code>Function</code></td>
<td>请求成功后调用的回调函数，有两个参数<br>(1)由服务器返回，并根据<code>dataTyppe</code>参数进行处理后的数据<br>(2)描述状态的字符串<br><code>function</code>(data,textStatus){<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//<code>data</code>可能是<code>xmlDoc、`</code>jsonObj<code>、</code>html<code>、</code>text<code>等&lt;br&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;</code>this<code>;//调用本次</code>Ajax<code>请求时传递的</code>options`参数<br>}</td>
</tr>
<tr>
<td><code>error</code></td>
<td><code>Function</code></td>
<td>请求失败时被调用的函数</td>
</tr>
<tr>
<td><code>global</code></td>
<td><code>Boolean</code></td>
<td>默认为<code>true</code>。表示是否触发全局<code>Ajax</code>事件，设置为<code>false</code>将不会触发。<code>AjaxStart</code>或<code>AjaxStop</code>可用于控制各种<code>Ajax</code>事件</td>
</tr>
</tbody>
</table>
<h4 id="第九节-插件"><a href="#第九节-插件" class="headerlink" title="第九节 插件"></a>第九节 插件</h4><hr>
<ul>
<li><p><strong>什么是插件</strong></p>
<ul>
<li>插件(<code>Plugin</code>)也称为<code>jQuery</code>的扩展。以<code>jQuery</code>核心代码为基础编写的符合一定规范的应用程序。通过<code>js</code>文件的方式引用。</li>
</ul>
</li>
<li><p><strong>插件分为哪几类</strong></p>
<ul>
<li><code>UI</code>类、表单及验证类、输入类、特效类、<code>Ajax</code>类、滑动类、图形图像类、导航类、综合工具类、动画类等等 </li>
</ul>
</li>
</ul>
<ul>
<li><strong>引入插件的步骤</strong><ul>
<li>引入<code>jquery.js</code>文件，而且在所以插件之前引入</li>
<li>引入插件</li>
<li>引入插件相关文件，比如皮肤、中文包</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>如何自定义插件</strong>：    </p>
<ul>
<li>插件形式分为3类：<ul>
<li>封装对象方法插件</li>
<li>封装全局函数插件</li>
<li>选择器插件(类似于.<code>find()</code>)</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>自定义插件的规范</strong>（解决各种插件的冲突和错误，增加成功率）</p>
<ul>
<li>命名：<code>jquery.插件名.js</code></li>
<li>所有的新方法附加在<code>jquery.fn</code>对象上面，所有新功能附加在<code>jquery</code>上</li>
<li>所有的方法或插件必须用分号结尾，避免出问题</li>
<li>插件必须返回jQuery对象，便于链式连缀</li>
<li>避免插件内部使用<code>$</code>，如果要使用，请传递<code>jQuery</code>(<code>$</code>并不是总等于<code>jQuery</code>，另外其他<code>js</code>框架也可能使用<code>$</code>)</li>
<li>插件中的<code>this</code>应该指向<code>jQuery</code>对象</li>
<li>使用<code>this.each()</code>迭代元素</li>
</ul>
</li>
<li><p><strong>自定义插件案例</strong></p>
<ul>
<li>为了方便用户创建插件，<code>jQuery</code>提供了 <code>jQuery.extend()</code> 和 <code>jQuery.fn.extend()</code></li>
<li><code>jQuery.extend()</code>：创建工具函数或者是选择器</li>
<li><code>jQuery.fn.extend()</code>：创建<code>jQuery</code>对象命令  （<code>fn</code>相当于<code>prototype</code>的别名）</li>
</ul>
</li>
<li><p><strong><code>jQuery</code>官方提供的插件开发模板</strong></p>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">;(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123;</span><br><span class="line">	$.fn.plugin=<span class="function"><span class="keyword">function</span>(<span class="params">options</span>)</span>&#123;</span><br><span class="line">		<span class="keyword">var</span> defaults = &#123;</span><br><span class="line">			<span class="comment">//各种参数 各种属性</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">var</span> options = $.extend(defaults,options);</span><br><span class="line"></span><br><span class="line">		<span class="keyword">this</span>.each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			<span class="comment">//实现功能的代码</span></span><br><span class="line">		&#125;);</span><br><span class="line"></span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;)(jQuery);</span><br></pre></td></tr></table></figure>
<p><strong>自定义<code>jQuery</code>函数</strong>：</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123;</span><br><span class="line">	$.extend(&#123;</span><br><span class="line">		test: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">			alert(<span class="string">"hello plugin"</span>);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;)</span><br><span class="line">	&#125;)(jQuery);</span><br></pre></td></tr></table></figure>
<p><strong>自定义<code>jQuery</code>命令</strong>：</p>
<ul>
<li>形式1：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123;</span><br><span class="line">    $.fn.extend(&#123;</span><br><span class="line">        say : <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">         alert(<span class="string">"hello plugin"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)(jQuery);</span><br></pre></td></tr></table></figure>
<ul>
<li>形式2：</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123;</span><br><span class="line">	$.fn.say = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">		alert(<span class="string">"hello plugin"</span>);</span><br><span class="line">	&#125;;</span><br><span class="line">	</span><br><span class="line">&#125;)(jQuery);</span><br></pre></td></tr></table></figure>
<h4 id="附录一-jQuery各个版本新增的一些常用的方法"><a href="#附录一-jQuery各个版本新增的一些常用的方法" class="headerlink" title="附录一 jQuery各个版本新增的一些常用的方法"></a>附录一 jQuery各个版本新增的一些常用的方法</h4><hr>
<ul>
<li><code>jQuery1.3</code>新增常用的方法</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.closest()</code></td>
<td>从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素</td>
</tr>
<tr>
<td><code>die()</code></td>
<td>从元素中删除先前用<code>live()</code>方法绑定的所有的事件</td>
</tr>
<tr>
<td><code>live()</code></td>
<td>附加一个事件处理器到符合目前选择器的所有元素匹配</td>
</tr>
</tbody>
</table>
<ul>
<li><code>jQuery1.4</code>新增常用的方法</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.first()</code></td>
<td>获取集合中第一个元素</td>
</tr>
<tr>
<td><code>last()</code></td>
<td>获取集合中最后一个元素</td>
</tr>
<tr>
<td><code>has(selector)</code></td>
<td>保留包含特定后代的元素，去掉那些不含有指定后代的元素</td>
</tr>
<tr>
<td><code>detach()</code></td>
<td>从<code>DOM</code>中去掉所有匹配的元素。<code>detach()</code>和<code>remov()</code>一样，除了<code>detach()</code>保存了所有<code>jquery</code>数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入<code>DOM</code>时，这种方法很有用</td>
</tr>
<tr>
<td><code>delegate()</code></td>
<td>为所有选择器匹配的元素附加一个处理一个或多个事件</td>
</tr>
<tr>
<td><code>undelegate()</code></td>
<td>为所有选择器匹配的元素删除一个处理一个或多个事件</td>
</tr>
</tbody>
</table>
<ul>
<li><code>jQuery1.6</code>新增常用的方法</li>
</ul>
<table>
<thead>
<tr>
<th>方法</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>prop(proptyName)</code></td>
<td>获取在匹配元素集合中的第一个元素的属性值</td>
</tr>
<tr>
<td><code>removeProp(proptyName,value)</code></td>
<td>为匹配的元素删除设置的属性</td>
</tr>
<tr>
<td><code>:focus</code></td>
<td>选择当前获取焦点的元素</td>
</tr>
</tbody>
</table>
<h4 id="附录二-jQuery性能优化"><a href="#附录二-jQuery性能优化" class="headerlink" title="附录二 jQuery性能优化"></a>附录二 jQuery性能优化</h4><hr>
<ul>
<li><p><strong>性能优化</strong></p>
<ul>
<li>使用最新版的jQuery类库</li>
<li><strong>使用合适的选择器</strong><ul>
<li><code>$(#id)</code><ul>
<li>使用<code>id</code>来定位<code>DOM</code>元素是最佳的方式，为了提高性能，建议从最近的<code>ID</code>元素开始往下搜索</li>
</ul>
</li>
<li><code>$(&quot;p&quot;)</code> , <code>$(&quot;div&quot;)</code> , <code>$(&quot;input&quot;)</code><ul>
<li>标签选择器性能也不错，它是性能优化的第二选择。因为<code>jQuery</code>将直接调用本地方法<code>document.getElementsByTagName()</code>来定位<code>DOM</code>元素</li>
</ul>
</li>
<li><code>$(&quot;.class&quot;)</code><ul>
<li>建议有选择性的使用  </li>
</ul>
</li>
<li><code>$(&quot;[attribute=value]&quot;)</code><ul>
<li>对这个利用属性定位<code>DOM</code>元素，本地<code>JavaScript</code>并没有直接实现。这种方式性能并不是很理想。建议避免使用。</li>
</ul>
</li>
<li><code>$(&quot;:hidden&quot;)</code><ul>
<li>和上面利用属性定位<code>DOM</code>方式类似，建议尽量不要使用 </li>
</ul>
</li>
<li><strong>注意的地方</strong><ul>
<li>尽量使用<code>ID</code>选择器</li>
<li>尽量给选择器指定上下文</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><strong>缓存对象</strong><ul>
<li>如果你需要在其他函数中使用<code>jQuery</code>对象，你可以把他们缓存在全局环境中</li>
</ul>
</li>
<li><strong>数组方式使用<code>jQuery</code>对象</strong><ul>
<li>使用<code>jQuery</code>选择器获取的结果是一个<code>jQuery</code>对象。在性能方面，建议使用<code>for</code>或<code>while</code>循环来处理，而不是<code>$.each()</code></li>
</ul>
</li>
<li><strong>事件代理</strong><ul>
<li>每一个<code>JavaScript</code>事件（如：<code>click</code>、<code>mouseove</code>r）都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点很有用。比如，我们要为一个表单绑定这样的行为：点击td后，把背景颜色设置为红色<ul>
<li><code>$(&quot;#myTable td&quot;).click(function(){$(this).css(&quot;background&quot;,&quot;red&quot;);});</code></li>
<li>假设有<code>100</code>个<code>td</code>元素，在使用以上的方式时，绑定了<code>100</code>个事件，将带来性能影响</li>
<li>代替这种多元素的事件监听方法是，你只需向他们的父节点绑定一次事件，然后通过<code>event.target</code>获取到点击的当前元素<ul>
<li><code>$(&quot;#myTable td&quot;).click(function({$(e.target).css(&quot;background&quot;,&quot;red&quot;)});</code></li>
<li><code>e.target</code>捕捉到触发的目标 </li>
</ul>
</li>
<li>在<code>jQuery1.7</code>中提供了一个新的方法<code>on()</code>，来帮助你将整个事件监听封装到一个便利的方法中<ul>
<li><code>$(&quot;#myTable td&quot;).on(&quot;click&quot;,&#39;td&#39;,function(){$(this).css(&quot;background&quot;,&quot;red&quot;);});</code></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><strong>将你的代码转化成jQuery插件</strong><ul>
<li>它能够使你的代码有更好的重用性，并且能够有效的帮助你组织代码</li>
</ul>
</li>
<li><p><strong>使用join()方法来拼接字符串</strong></p>
<ul>
<li>也许你之前使用<code>+</code>来拼接字符串，现在可以改了。它确实有助于性能优化，尤其是长字符串处理的时候</li>
</ul>
</li>
<li><p><strong>合理使用HTML5和Data属性</strong></p>
<ul>
<li><code>HTML5</code>的<code>data</code>属性可以帮助我们插入数据，特别是后端的数据交换。<code>jQuery</code>的<code>Data()</code>方法有效利用<code>HTML5</code>的属性<ul>
<li>例如：<code>&lt;div id=&quot;dl&quot; data-role=&quot;page&quot; data-list-value=&quot;43&quot; data-options=&#39;{&quot;name:&quot;&quot;John&quot;}&#39;&gt;</code></li>
<li>为了读取数据，你需要使用如下代码<ul>
<li><code>$(&quot;#dl&#39;).data(&quot;role&#39;;//page)</code></li>
<li><code>$(&quot;#dl&#39;).data(&quot;lastValue&#39;;//43)</code></li>
<li><code>$(&quot;#dl&#39;).data(&quot;options&#39;;//john)</code></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><p><strong>尽量使用原生的JavaScript方法</strong></p>
</li>
<li><strong>压缩JavaScript代码</strong><ul>
<li>一方面使用<code>Gzip</code>；另一方面去除<code>JavaScript</code>文件里面的注释、空白 </li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="附录三-常用的jQuery代码片段"><a href="#附录三-常用的jQuery代码片段" class="headerlink" title="附录三 常用的jQuery代码片段"></a>附录三 常用的jQuery代码片段</h4><hr>
<ul>
<li>禁用页面的右键菜单</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(functuion()&#123;</span><br><span class="line">    $(<span class="built_in">document</span>).bind(<span class="string">"contextmenu"</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">  &#125;);  </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>新窗口打开页面</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//例子1：href="http://"的链接将会在新窗口打开链接</span></span><br><span class="line">    $(<span class="string">'a[href=^="http://"]'</span>).attr(<span class="string">"target"</span>,<span class="string">"_blank"</span>);</span><br><span class="line">    </span><br><span class="line">  <span class="comment">//例子2：rel="external"的超链接将会在新窗口打开链接</span></span><br><span class="line">    $(<span class="string">"a[rel$='external']"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">this</span>.target = <span class="string">"_blank"</span>;</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//use</span></span><br><span class="line">&lt;a href=<span class="string">"http://baidu.com"</span> rel=<span class="string">"external"</span>&gt;open&lt;<span class="regexp">/a&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>判断浏览器类型</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">$(<span class="built_in">document</span>).reday(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">//Firefox2 and above</span></span><br><span class="line">    <span class="keyword">if</span>( $.browser.mozilla &amp;&amp; $.browser.version&gt;=<span class="string">"1.8"</span>)&#123;</span><br><span class="line">      <span class="comment">//do something</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Safari</span></span><br><span class="line">  <span class="keyword">if</span>($.browser.safari)&#123;</span><br><span class="line">     <span class="comment">//do something</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Chrome</span></span><br><span class="line">  <span class="keyword">if</span>($.browser.chrome)&#123;</span><br><span class="line">     <span class="comment">//do something</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// Opera</span></span><br><span class="line">  <span class="keyword">if</span>($.browser.opera)&#123;</span><br><span class="line">     <span class="comment">//do something</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">  <span class="comment">// IE6 and blow</span></span><br><span class="line">  <span class="keyword">if</span>($.browser.msie &amp;&amp; $.browser.version&lt;=<span class="number">6</span>)&#123;</span><br><span class="line">     <span class="comment">//do something</span></span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="comment">// anything above IE6</span></span><br><span class="line">  <span class="keyword">if</span>($.browser.msie &amp;&amp; $.browser.version &gt; <span class="number">6</span>)&#123;</span><br><span class="line">     <span class="comment">//do something</span></span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>输入框文字获取和失去焦点</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"input.text1"</span>).val(<span class="string">"Enter you search text here"</span>);</span><br><span class="line">    textFill($(<span class="string">'input.text1'</span>));</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">textFill</span>(<span class="params">input</span>)</span>&#123;<span class="comment">//input focus text function</span></span><br><span class="line">    <span class="keyword">var</span> originvalue = input.val();</span><br><span class="line">    input.focus(funtion()&#123;</span><br><span class="line">        <span class="keyword">if</span>($.trim(input.val())== originvalue)&#123;</span><br><span class="line">            input.val(<span class="string">' '</span>);</span><br><span class="line">        &#125;</span><br><span class="line">  &#125;).blur(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>($.trim(input.val()) == <span class="string">' '</span>)&#123;</span><br><span class="line">          input.val(originalvalue);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>获取鼠标位置</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  $(<span class="built_in">document</span>).mousemove(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">      $(<span class="string">"#XY"</span>).html(<span class="string">"X:"</span> + e.pageX+ <span class="string">"| Y"</span> + e.pageY);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>判断元素是否存在</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>($(<span class="string">"#id"</span>).length)&#123;</span><br><span class="line">      <span class="comment">// do some thing  </span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>点击div也可以跳转</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">window</span>.location  = $(<span class="keyword">this</span>).find(<span class="string">"a"</span>).attr(<span class="string">"href"</span>);</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">//use</span></span><br><span class="line"></span><br><span class="line">&lt;div&gt;<span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"index.html"</span>&gt;</span>home<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span>&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>设置div在屏幕中央</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    jQuery.fn.center = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.css(<span class="string">"position"</span>,<span class="string">"absolute"</span>);</span><br><span class="line">        <span class="keyword">this</span>.css(<span class="string">"top"</span>,($(<span class="built_in">window</span>).height() - <span class="keyword">this</span>.lenght()) / <span class="number">2</span> +$(<span class="built_in">window</span>).scrollTop() + <span class="string">"px"</span>); </span><br><span class="line">        <span class="keyword">this</span>.css(<span class="string">"left"</span>,($(<span class="built_in">window</span>).height() - <span class="keyword">this</span>.lenght()) / <span class="number">2</span> +$(<span class="built_in">window</span>).scrollLeft() + <span class="string">"px"</span>); </span><br><span class="line">      <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">  &#125;</span><br><span class="line"><span class="comment">//use </span></span><br><span class="line"></span><br><span class="line"> $(<span class="string">"#XY"</span>).center();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>关闭所有动画效果</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    jQuery.fx.off = <span class="literal">true</span>;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>检测鼠标的右键和左键</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"#xy"</span>).mousedown(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">        alert(e.which);<span class="comment">//1 = 鼠标左键  2= 鼠标中间 3 = 鼠标右键</span></span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>回车提交表单</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"input"</span>).keyup(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">if</span>(e.which == <span class="string">"13"</span>)&#123;</span><br><span class="line">            alert(<span class="string">"回车提交"</span>);</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>设置全局的Ajax参数</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"#load"</span>).ajaxStart(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    showLoading();<span class="comment">//显示loading</span></span><br><span class="line">    disableButtons() <span class="comment">//禁用按钮</span></span><br><span class="line">&#125;)</span><br><span class="line"> $(<span class="string">"#load"</span>).ajaxComplete(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    hideLoading();<span class="comment">//隐藏loading</span></span><br><span class="line">    enableButtons();<span class="comment">//启用按钮</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>获取选中的下拉框</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"#someElement"</span>).find(<span class="string">'option:selected'</span>);</span><br><span class="line">$(<span class="string">"#someElement option:selected"</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>切换复选框</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> tog = <span class="literal">false</span>;</span><br><span class="line">$(<span class="string">"button"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"input[type=checkbox]').attr("</span>checked<span class="string">",!tog);</span></span><br><span class="line"><span class="string">    tog = !tog;</span></span><br><span class="line"><span class="string">&#125;);</span></span><br></pre></td></tr></table></figure>
<ul>
<li>个性化链接</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     $(<span class="string">"a[href$='pdf']"</span>).addClass(<span class="string">"pdf"</span>);</span><br><span class="line">     $(<span class="string">"a[href$='zip']"</span>).addClass(<span class="string">"zip"</span>);</span><br><span class="line">     $(<span class="string">"a[href$='psd']"</span>).addClass(<span class="string">"psd"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>在一段时间后自动隐藏或关闭元素</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">setTimeOut(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        $(<span class="string">"div"</span>).fadeIn(<span class="number">400</span>);</span><br><span class="line">  &#125;,<span class="number">3000</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//而在1.4之后的版本可以用delay()来实现</span></span><br><span class="line">$(<span class="string">"div"</span>).slideUp(<span class="number">300</span>).delay(<span class="number">3000</span>).fadeIn(<span class="number">400</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>使用事件代理绑定元素</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"> <span class="comment">//为table里面的td元素绑定click事件，不管td是一直存在还是动态创建的</span></span><br><span class="line"> <span class="comment">//jQuery 1.4.2之前使用这种方式</span></span><br><span class="line"> $(<span class="string">"table"</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="string">"td"</span>,<span class="keyword">this</span>).live(<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">       $(<span class="keyword">this</span>).toggleClass(<span class="string">"hover"</span>); </span><br><span class="line">    &#125;);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//jquery 1.4.2使用的方式</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">"table"</span>).delegate(<span class="string">"td"</span>,<span class="string">"click"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="keyword">this</span>).toggleClass(<span class="string">"hover"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">//jQuery1.7.1使用的方式</span></span><br><span class="line">$(<span class="string">"table"</span>).on(<span class="string">"click"</span>,<span class="string">"td"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    $(<span class="keyword">this</span>).toggleClass(<span class="string">"hover"</span>);</span><br><span class="line"> &#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>预加载图片</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> cache = [];</span><br><span class="line">  <span class="comment">// Arguments are image paths relative to the current page.</span></span><br><span class="line">  $.preLoadImages = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> args_len = <span class="built_in">arguments</span>.length;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = args_len; i--;) &#123;</span><br><span class="line">      <span class="keyword">var</span> cacheImage = <span class="built_in">document</span>.createElement(<span class="string">'img'</span>);</span><br><span class="line">      cacheImage.src = <span class="built_in">arguments</span>[i];</span><br><span class="line">      cache.push(cacheImage);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">jQuery.preLoadImages(<span class="string">"image1.gif"</span>, <span class="string">"/path/to/image2.png"</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>让页面中的每个元素都适合在移动设备上展示</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> scr = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>);</span><br><span class="line">scr.setAttribute(<span class="string">'src'</span>, <span class="string">'https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'</span>);</span><br><span class="line"><span class="built_in">document</span>.body.appendChild(scr);</span><br><span class="line">scr.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	$(<span class="string">'div'</span>).attr(<span class="string">'class'</span>, <span class="string">''</span>).attr(<span class="string">'id'</span>, <span class="string">''</span>).css(&#123;</span><br><span class="line">		<span class="string">'margin'</span> : <span class="number">0</span>,</span><br><span class="line">		<span class="string">'padding'</span> : <span class="number">0</span>,</span><br><span class="line">		<span class="string">'width'</span>: <span class="string">'100%'</span>,</span><br><span class="line">		<span class="string">'clear'</span>:<span class="string">'both'</span></span><br><span class="line">	&#125;);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<ul>
<li>图像等比例缩放</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">window</span>).bind(<span class="string">"load"</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	<span class="comment">// IMAGE RESIZE</span></span><br><span class="line">	$(<span class="string">'#product_cat_list img'</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">var</span> maxWidth = <span class="number">120</span>;</span><br><span class="line">		<span class="keyword">var</span> maxHeight = <span class="number">120</span>;</span><br><span class="line">		<span class="keyword">var</span> ratio = <span class="number">0</span>;</span><br><span class="line">		<span class="keyword">var</span> width = $(<span class="keyword">this</span>).width();</span><br><span class="line">		<span class="keyword">var</span> height = $(<span class="keyword">this</span>).height();</span><br><span class="line">		<span class="keyword">if</span>(width &gt; maxWidth)&#123;</span><br><span class="line">			ratio = maxWidth / width;</span><br><span class="line">			$(<span class="keyword">this</span>).css(<span class="string">"width"</span>, maxWidth);</span><br><span class="line">			$(<span class="keyword">this</span>).css(<span class="string">"height"</span>, height * ratio);</span><br><span class="line">			height = height * ratio;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">var</span> width = $(<span class="keyword">this</span>).width();</span><br><span class="line">		<span class="keyword">var</span> height = $(<span class="keyword">this</span>).height();</span><br><span class="line">		<span class="keyword">if</span>(height &gt; maxHeight)&#123;</span><br><span class="line">			ratio = maxHeight / height;</span><br><span class="line">			$(<span class="keyword">this</span>).css(<span class="string">"height"</span>, maxHeight);</span><br><span class="line">			$(<span class="keyword">this</span>).css(<span class="string">"width"</span>, width * ratio);</span><br><span class="line">			width = width * ratio;</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;);</span><br><span class="line">	<span class="comment">//$("#contentpage img").show();</span></span><br><span class="line">	<span class="comment">// IMAGE RESIZE</span></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>返回页面顶部</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Back To Top</span></span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; </span><br><span class="line">  $(<span class="string">'.top'</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;  </span><br><span class="line">     $(<span class="built_in">document</span>).scrollTo(<span class="number">0</span>,<span class="number">500</span>);  </span><br><span class="line">  &#125;);</span><br><span class="line">&#125;); </span><br><span class="line"><span class="comment">//Create a link defined with the class .top</span></span><br><span class="line">&lt;a href=<span class="string">"#"</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">"top"</span>&gt;Back To Top&lt;<span class="regexp">/a&gt;</span></span><br></pre></td></tr></table></figure>
<ul>
<li>使用jQuery打造手风琴式的折叠效果</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> accordion = &#123;</span><br><span class="line">     init: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">           <span class="keyword">var</span> $container = $(<span class="string">'#accordion'</span>);</span><br><span class="line">           $container.find(<span class="string">'li:not(:first) .details'</span>).hide();</span><br><span class="line">           $container.find(<span class="string">'li:first'</span>).addClass(<span class="string">'active'</span>);</span><br><span class="line">           $container.on(<span class="string">'click'</span>,<span class="string">'li a'</span>,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">                  e.preventDefault();</span><br><span class="line">                  <span class="keyword">var</span> $<span class="keyword">this</span> = $(<span class="keyword">this</span>).parents(<span class="string">'li'</span>);</span><br><span class="line">                  <span class="keyword">if</span>($<span class="keyword">this</span>.hasClass(<span class="string">'active'</span>))&#123;</span><br><span class="line">                         <span class="keyword">if</span>($(<span class="string">'.details'</span>).is(<span class="string">':visible'</span>)) &#123;</span><br><span class="line">                                $<span class="keyword">this</span>.find(<span class="string">'.details'</span>).slideUp();</span><br><span class="line">                         &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                                $<span class="keyword">this</span>.find(<span class="string">'.details'</span>).slideDown();</span><br><span class="line">                         &#125;</span><br><span class="line">                  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                         $container.find(<span class="string">'li.active .details'</span>).slideUp();</span><br><span class="line">                         $container.find(<span class="string">'li'</span>).removeClass(<span class="string">'active'</span>);</span><br><span class="line">                         $<span class="keyword">this</span>.addClass(<span class="string">'active'</span>);</span><br><span class="line">                         $<span class="keyword">this</span>.find(<span class="string">'.details'</span>).slideDown();</span><br><span class="line">                  &#125;</span><br><span class="line">           &#125;);</span><br><span class="line">     &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<ul>
<li>使用jQuery和Ajax自动填充选择框</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">$(<span class="string">"select#ctlJob"</span>).change(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">$.getJSON(<span class="string">"/select.php"</span>,&#123;<span class="attr">id</span>: $(<span class="keyword">this</span>).val(), <span class="attr">ajax</span>: <span class="string">'true'</span>&#125;, <span class="function"><span class="keyword">function</span>(<span class="params">j</span>)</span>&#123;</span><br><span class="line"><span class="keyword">var</span> options = <span class="string">''</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; j.length; i++) &#123;</span><br><span class="line">options += <span class="string">'</span></span><br><span class="line"><span class="string">'</span> + j[i].optionDisplay + <span class="string">'</span></span><br><span class="line"><span class="string">'</span>;</span><br><span class="line">&#125;</span><br><span class="line">$(<span class="string">"select#ctlPerson"</span>).html(options);</span><br><span class="line">&#125;)</span><br><span class="line">&#125;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<ul>
<li>自动替换丢失的图片</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// Safe Snippet</span></span><br><span class="line">$(<span class="string">"img"</span>).error(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">	$(<span class="keyword">this</span>).unbind(<span class="string">"error"</span>).attr(<span class="string">"src"</span>, <span class="string">"missing_image.gif"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// Persistent Snipper</span></span><br><span class="line">$(<span class="string">"img"</span>).error(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">	$(<span class="keyword">this</span>).attr(<span class="string">"src"</span>, <span class="string">"missing_image.gif"</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>预防对表单进行多次提交</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  $(<span class="string">'form'</span>).submit(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> jQuery.data(<span class="keyword">this</span>, <span class="string">"disabledOnSubmit"</span>) == <span class="string">'undefined'</span>) &#123;</span><br><span class="line">      jQuery.data(<span class="keyword">this</span>, <span class="string">"disabledOnSubmit"</span>, &#123; <span class="attr">submited</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">      $(<span class="string">'input[type=submit], input[type=button]'</span>, <span class="keyword">this</span>).each(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        $(<span class="keyword">this</span>).attr(<span class="string">"disabled"</span>, <span class="string">"disabled"</span>);</span><br><span class="line">      &#125;);</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span></span><br><span class="line">    &#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>动态添加表单元素</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//change event on password1 field to prompt new input</span></span><br><span class="line">$(<span class="string">'#password1'</span>).change(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="comment">//dynamically create new input and insert after password1</span></span><br><span class="line">        $(<span class="string">"#password1"</span>).append(<span class="string">""</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>在窗口滚动时自动加载内容</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> loading = <span class="literal">false</span>;</span><br><span class="line">$(<span class="built_in">window</span>).scroll(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">	<span class="keyword">if</span>((($(<span class="built_in">window</span>).scrollTop()+$(<span class="built_in">window</span>).height())+<span class="number">250</span>)&gt;=$(<span class="built_in">document</span>).height())&#123;</span><br><span class="line">		<span class="keyword">if</span>(loading == <span class="literal">false</span>)&#123;</span><br><span class="line">			loading = <span class="literal">true</span>;</span><br><span class="line">			$(<span class="string">'#loadingbar'</span>).css(<span class="string">"display"</span>,<span class="string">"block"</span>);</span><br><span class="line">			$.<span class="keyword">get</span>("load.php?start="+$('#loaded_max').val(), function(loaded)&#123;</span><br><span class="line">				$(<span class="string">'body'</span>).append(loaded);</span><br><span class="line">				$(<span class="string">'#loaded_max'</span>).val(<span class="built_in">parseInt</span>($(<span class="string">'#loaded_max'</span>).val())+<span class="number">50</span>);</span><br><span class="line">				$(<span class="string">'#loadingbar'</span>).css(<span class="string">"display"</span>,<span class="string">"none"</span>);</span><br><span class="line">				loading = <span class="literal">false</span>;</span><br><span class="line">			&#125;);</span><br><span class="line">		&#125;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">	$(<span class="string">'#loaded_max'</span>).val(<span class="number">50</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>导航菜单背景切换效果</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;ul id=<span class="string">'nav'</span>&gt; </span><br><span class="line">    &lt;li&gt;导航一&lt;<span class="regexp">/li&gt; </span></span><br><span class="line"><span class="regexp">    &lt;li&gt;导航二&lt;/</span>li&gt; </span><br><span class="line">    &lt;li&gt;导航三&lt;<span class="regexp">/li&gt;</span></span><br><span class="line"><span class="regexp">&lt;/u</span>l&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">//注意：代码需要修饰完善</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">'#nav'</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line"> <span class="comment">// 要知道siblings的使用          </span></span><br><span class="line"></span><br><span class="line">$(e.target).addClass(<span class="string">'tclass'</span>).siblings(<span class="string">'.tclass'</span>).removeClass(<span class="string">'tclass'</span>);;</span><br><span class="line"></span><br><span class="line"> &#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>解决<code>jQuery</code>, <code>prototype</code>共存，<code>$</code>全局变量冲突问题</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">&lt;script src=<span class="string">"prototype.js"</span>&gt;&lt;<span class="regexp">/script&gt;</span></span><br><span class="line"><span class="regexp">&lt;script src="http:/</span><span class="regexp">/blogbeta.blueidea.com/</span>jquery.js<span class="string">"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="string">&lt;script type="</span>text/javascript<span class="string">"&gt; jQuery.noConflict();&lt;/script&gt; </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">注意：一定要先引入prototype.js 再引入jquery.js，先后顺序不可错</span></span><br></pre></td></tr></table></figure>
<ul>
<li>jQuery 判断元素上是否绑定了事件</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//jQuery event封装支持判断元素上是否绑定了事件，此方法只适用于jQuery绑定的事件</span></span><br><span class="line"><span class="keyword">var</span> $events = $(<span class="string">"#foo"</span>).data(<span class="string">"events"</span>);</span><br><span class="line"><span class="keyword">if</span>( $events &amp;&amp; $events[<span class="string">"click"</span>] )&#123;　　</span><br><span class="line">    <span class="comment">//your code</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>如何正确地使用<code>toggleClass</code></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//切换（toggle）类允许你根据某个类的//是否存在来添加或是删除该类。</span></span><br><span class="line"><span class="comment">//这种情况下有些开发者使用：</span></span><br><span class="line">a.hasClass(<span class="string">'blueButton'</span>) ? a.removeClass(<span class="string">'blueButton'</span>) : a.addClass(<span class="string">'blueButton'</span>);</span><br><span class="line"><span class="comment">//toggleClass允许你使用下面的语句来很容易地做到这一点</span></span><br><span class="line">a.toggleClass(<span class="string">'blueButton'</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>如何设置IE特有的功能</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">if</span> ($.browser.msie) &#123;</span><br><span class="line">    <span class="comment">// Internet Explorer就是个虐待狂</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>如何验证某个元素是否为空</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">// 方法一</span></span><br><span class="line"><span class="keyword">if</span> (! $(<span class="string">'#keks'</span>).html()) &#123;</span><br><span class="line">    <span class="comment">//什么都没有找到;</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 方法二</span></span><br><span class="line"><span class="keyword">if</span> ($(<span class="string">'#keks'</span>).is(<span class="string">":empty"</span>)) &#123;</span><br><span class="line">    <span class="comment">//什么都没有找到;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<ul>
<li>访问IFrame里的元素</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> iFrameDOM = $(<span class="string">"iframe#someID"</span>).contents();</span><br><span class="line"><span class="comment">//然后，就可以通过find方法来遍历获取iFrame中的元素了</span></span><br><span class="line">iFrameDOM.find(<span class="string">".message"</span>).slideUp();</span><br></pre></td></tr></table></figure>
<ul>
<li>管理搜索框的值<ul>
<li>现在各大网站都有搜索框，而搜索框通常都有默认值，当输入框获取焦点时，默认值消失。而一旦输入框失去焦点，而输入框里又没有输入新的值，输入框里的值又会恢复成默认值，如果往输入框里输入了新值，则输入框的值为新输入的值。这种特效用<code>JQuery</code><br>很容易实现</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">$(<span class="string">"#searchbox"</span>) .focus(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      $(<span class="keyword">this</span>).val(<span class="string">''</span>)</span><br><span class="line">&#125;) .blur(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="keyword">var</span> $<span class="keyword">this</span> = $(<span class="keyword">this</span>); </span><br><span class="line">    <span class="comment">// '请搜索...'为搜索框默认值 </span></span><br><span class="line">    ($<span class="keyword">this</span>.val() === <span class="string">''</span>)? $<span class="keyword">this</span>.val(<span class="string">'请搜索...'</span>) : <span class="literal">null</span>; </span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<ul>
<li>部分页面加载更新<ul>
<li>为了提高<code>web</code>性能，有更新时我们通常不会加载整个页面，而只是仅仅更新部分页面内容，如图片的延迟加载等。页面部分刷新的特效在<code>JQuery</code>中也很容易实现</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line">setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123; </span><br><span class="line"><span class="comment">//每隔5秒钟刷新页面内容 //获取的内容将增加到 id为content的元素后 </span></span><br><span class="line"></span><br><span class="line">$(<span class="string">"#content"</span>).load(url); &#125;, <span class="number">5000</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li>采配置JQuery与其它库的兼容性<ul>
<li>如果在项目中使用<code>JQuery</code>，<code>$</code> 是最常用的变量名，但<code>JQuery</code>并不是唯一一个使用<code>$</code>作为变量名的库，为了避免命名冲突，你可以按照下面方式来组织你的代码</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//方法一： 为JQuery重新命名为</span></span><br><span class="line"> $jvar $j = jQuery.noConflict();$j(<span class="string">'#id'</span>).... <span class="comment">//</span></span><br><span class="line"></span><br><span class="line">方法二： 推荐使用的方式</span><br><span class="line"></span><br><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params">$</span>)</span>&#123; $(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">     <span class="comment">//这儿，你可以正常的使用JQuery语法 &#125;);</span></span><br><span class="line">&#125;)(jQuery);</span><br></pre></td></tr></table></figure>
<ul>
<li>测试密码的强度<ul>
<li>在某些网站注册时常常会要求设置密码，网站也会根据输入密码的字符特点给出相应的提示，如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢？看下面代码：</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">name</span>=<span class="string">"pass"</span> <span class="attr">id</span>=<span class="string">"pass"</span> /&gt;</span> <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"passstrength"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="comment">//下面的正则表达式建议各位收藏哦，项目上有可能会用得着</span></span><br><span class="line">$(<span class="string">'#pass'</span>).keyup(<span class="function"><span class="keyword">function</span>(<span class="params">e</span>) </span>&#123; </span><br><span class="line"></span><br><span class="line"><span class="comment">//密码为八位及以上并且字母数字特殊字符三项都包括 </span></span><br><span class="line"><span class="keyword">var</span> strongRegex = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"^(?=.&#123;8,&#125;)(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$"</span>, <span class="string">"g"</span>); </span><br><span class="line"></span><br><span class="line"><span class="comment">//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 </span></span><br><span class="line"> <span class="keyword">var</span> mediumRegex = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"^(?=.&#123;7,&#125;)(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$"</span>, <span class="string">"g"</span>); </span><br><span class="line"><span class="keyword">var</span> enoughRegex = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"(?=.&#123;6,&#125;).*"</span>, <span class="string">"g"</span>); </span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="literal">false</span> == enoughRegex.test($(<span class="keyword">this</span>).val())) &#123; </span><br><span class="line"></span><br><span class="line">$(<span class="string">'#passstrength'</span>).html(<span class="string">'More Characters'</span>); &#125;</span><br><span class="line"> <span class="keyword">else</span> <span class="keyword">if</span> (strongRegex.test($(<span class="keyword">this</span>).val())) &#123;</span><br><span class="line">     $(<span class="string">'#passstrength'</span>).className = <span class="string">'ok'</span>; </span><br><span class="line">     $(<span class="string">'#passstrength'</span>).html(<span class="string">'Strong!'</span>); &#125; </span><br><span class="line"><span class="keyword">else</span> <span class="keyword">if</span> (mediumRegex.test($(<span class="keyword">this</span>).val())) &#123;</span><br><span class="line">    $(<span class="string">'#passstrength'</span>).className = <span class="string">'alert'</span>; </span><br><span class="line">    $(<span class="string">'#passstrength'</span>).html(<span class="string">'Medium!'</span>); &#125;</span><br><span class="line"> <span class="keyword">else</span> &#123; </span><br><span class="line">    $(<span class="string">'#passstrength'</span>).className = <span class="string">'error'</span>;      </span><br><span class="line">    $(<span class="string">'#passstrength'</span>).html(<span class="string">'Weak!'</span>); </span><br><span class="line">&#125; </span><br><span class="line"><span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"></span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h4 id="附录四-常见CND加速服务"><a href="#附录四-常见CND加速服务" class="headerlink" title="附录四 常见CND加速服务"></a>附录四 常见CND加速服务</h4><hr>
<ul>
<li><a href="http://www.bootcdn.cn/" target="_blank" rel="noopener">Bootstrap中文网开源项目免费 CDN 服务</a></li>
<li><a href="http://cdn.code.baidu.com/" target="_blank" rel="noopener">百度静态资源公共库</a></li>
<li><a href="http://libs.useso.com/" target="_blank" rel="noopener">360网站卫士常用前端公共库CDN服务–已停止服务</a></li>
<li><a href="http://staticfile.org/" target="_blank" rel="noopener">开放静态文件 CDN </a></li>
<li><a href="http://www.asp.net/ajax/cdn" target="_blank" rel="noopener">微软CDN服务</a></li>
<li><a href="https://bbs.aliyun.com/read/139395.html" target="_blank" rel="noopener">阿里云</a></li>
<li><a href="http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs" target="_blank" rel="noopener">百度开放云平台</a></li>
<li><a href="http://code.jquery.com/" target="_blank" rel="noopener">jQuery CDN</a></li>
<li><a href="http://www.jq22.com/cdn/" target="_blank" rel="noopener">jQuery cdn加速</a></li>
<li><a href="http://lib.sinaapp.com/" target="_blank" rel="noopener">新浪CDN</a></li>
</ul>
<h4 id="附录五-jQuery的一些资源"><a href="#附录五-jQuery的一些资源" class="headerlink" title="附录五 jQuery的一些资源"></a>附录五 jQuery的一些资源</h4><hr>
<ul>
<li>速查手册<ul>
<li><a href="http://www.css88.com/jqapi-1.9/" target="_blank" rel="noopener">jQuery API 中文文档–css88</a></li>
<li><a href="http://overapi.com/jquery" target="_blank" rel="noopener">jQuery-overapi</a></li>
<li><a href="http://www.sxt.cn/searchsxt/sxtapipro/index.html" target="_blank" rel="noopener">在线桌面版API</a></li>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/%E5%AE%9E%E7%94%A8%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8CAPI.md" target="_blank" rel="noopener">更多详情—一份实用的API参考手册集合</a></li>
</ul>
</li>
<li><code>jQuery</code>插件<ul>
<li>基础常用<ul>
<li><a href="http://caibaojian.com/scrollfix" target="_blank" rel="noopener">滚动固定在某个位置</a></li>
<li><a href="http://caibaojian.com/power-slider" target="_blank" rel="noopener">jQuery图片滚动插件全能版</a></li>
<li><a href="http://code.ciaoca.com/jquery/wookmark/?utm_source=caibaojian.com" target="_blank" rel="noopener">jQuery Wookmark Load 瀑布流布局</a></li>
<li><a href="http://code.ciaoca.com/jquery/jcrop/?utm_source=caibaojian.com" target="_blank" rel="noopener">jQuery Jcrop 图像裁剪</a></li>
<li><a href="http://code.ciaoca.com/jquery/kxbdmarquee/?utm_source=caibaojian.com" target="_blank" rel="noopener">jQuery kxbdMarquee 无缝滚动</a></li>
<li><a href="http://code.ciaoca.com/jquery/lightbox/?utm_source=caibaojian.com" target="_blank" rel="noopener">jQuery lightBox 灯箱效果</a></li>
<li><a href="http://www.appelsiini.net/projects/lazyload?utm_source=caibaojian.com" target="_blank" rel="noopener">Lazy Load Plugin for jQuery</a></li>
</ul>
</li>
<li>更多插件-动效库整理<ul>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/%E6%8F%92%E4%BB%B6%E5%BA%93.md" target="_blank" rel="noopener">插件动效库</a></li>
<li><a href="https://github.com/poetries/mywiki/blob/master/bookmark/%E5%B8%B8%E7%94%A8%E7%BB%84%E4%BB%B6.md" target="_blank" rel="noopener">常用组件</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<h4 id="扩展阅读"><a href="#扩展阅读" class="headerlink" title="扩展阅读"></a>扩展阅读</h4><hr>
<ul>
<li><a href="http://www.cnblogs.com/aaronjs/p/3279314.html" target="_blank" rel="noopener">jQuery源码分析系列</a></li>
</ul>
<h4 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h4><hr>
<ul>
<li>锋利的<code>jQuery</code></li>
</ul>
<hr>
<ul>
<li><a href="https://github.com/poetries/poetries.github.io/blob/dev/source/_posts/review-jQuery.md" target="_blank" rel="noopener">本文md源文件</a></li>
</ul>

      </div>
    
  </div>

</article>

<button class="assist-btn2 circle" id="assist_btn2" title="点亮屏幕" style="left: 27px; top: 152px;">
  <i class="iconfont" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>
<button class="assist-btn1 circle" id="assist_btn1" title="关闭屏幕亮度" style="left: 27px; top: 152px;">
  <i class="iconfont toc-title" style="display:inline-block;color:red;width:20px;height:20px;">&#xe61d;</i>
</button>


<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>	

<script src="https://my.openwrite.cn/js/readmore.js" type="text/javascript"></script>
<script>
  const btw = new BTWPlugin();
  btw.init({
    id: "container",
    blogId: "22699-1592137983091-414",
    name: "前端进阶之旅",
    qrcode: "https://poetries1.gitee.io/img-repo/2020/06/qrcode.jpg",
    keyword: "3a3b3c",
  });
</script>

<script type="text/javascript">

// white theme
var body = {color: "#555", background: "#000"};
var a_tag = {color: "#222"};
var header = { background: "#222"};
var logo_line_i = {background: "#222"};
// var post_code = {background: "#eee", color: "#222"};

function switch_theme() {
 $("body").css(body);
 $("a:not('.links-of-author-item a, .site-state-item a, .site-state-posts a, .feed-link a, .motion-element a, .post-tags a, .show-commit-cls a, #donate_board a')").css(a_tag);
 $(".header, .footer").css(header);
 $(".logo-line-before i, .logo-line-after i").css(logo_line_i);
 //$(".post code").css(post_code);
 $("#idhyt-surprise-ball #idhyt-surprise-ball-animation .drag").css(a_tag);
 $(".post-title-link, .posts-expand .post-meta, .post-comments-count, .disqus-comment-count, .post-category a, .post-nav-next a, .post-nav-item a").css(a_tag);
 
 // $("code").css({color: '#c5c8c6', background: '#1d1f21'});
 //$("#assist_btn1").hide(1500);
}

$(function () {
$("#assist_btn2").css("display","none");
 $("#assist_btn1").click(function() {
     switch_theme();
$("div#toc.toc-article").css({
 "background":"#eaeaea",
 "opacity":1
});
$(".toc-article ol").show();
$("#toc.toc-article .toc-title").css("color","#a98602");
$("#assist_btn1").css("display","none");
$("#assist_btn2").css("display","block");
 });
$("#assist_btn2").click(function() {
$("#assist_btn2").css("display","none");
$("#assist_btn1").css("display","block");
$("body").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
     $(".header, .footer").css("background","url(http://www.miaov.com/static/ie/images/news/bg.png)")
$(".toc-article ol").toggle(1000);
 });
});


//背景随机

var Y, O, E, L, B, C, T, z, N, S, A, I;
!function() {
var e = function() {
for (O.clearRect(0, 0, L, B), T = [{
x: 0,
y: .7 * B + C
}, {
x: 0,
y: .7 * B - C
}]; T[1].x < L + C;) t(T[0], T[1])
}, t = function(e, t) {
O.beginPath(), O.moveTo(e.x, e.y), O.lineTo(t.x, t.y);
var n = t.x + (2 * I() - .25) * C,
 r = a(t.y);
O.lineTo(n, r), O.closePath(), N -= S / -50, O.fillStyle = "#" + (127 * A(N) + 128 << 16 | 127 * A(N + S / 3) + 128 << 8 | 127 * A(N + S / 3 * 2) + 128).toString(16), O.fill(), T[0] = T[1], T[1] = {
 x: n,
 y: r
}
}, a = function n(e) {
var t = e + (2 * I() - 1.1) * C;
return t > B || t < 0 ? n(e) : t
};
Y = document.getElementById("evanyou"), O = Y.getContext("2d"), E = window.devicePixelRatio || 1, L = window.innerWidth, B = window.innerHeight, C = 90, z = Math, N = 0, S = 2 * z.PI, A = z.cos, I = z.random, Y.width = L * E, Y.height = B * E, O.scale(E, E), O.globalAlpha = .6, document.onclick = e, document.ontouchstart = e, e()
}()

   
$("#toc-eye").click(function(){
$("#toc.toc-article").toggle(1000);
});

</script>


   
  <div class="text-center donation">
    <div class="inner-donation">
      <span class="btn-donation">支持一下</span>
      <div class="donation-body">
        <div class="tip text-center">扫一扫，支持poetries</div>
        <ul>
        
          <li class="item">
            
              <span>微信扫一扫</span>
            
            <img src="/images/weixin.jpg" alt="">
          </li>
        
          <li class="item">
            
              <span>支付宝扫一扫</span>
            
            <img src="/images/zhifubao.jpg" alt="">
          </li>
        
        </ul>
      </div>
    </div>
  </div>


   
  <div class="box-prev-next clearfix">
    <a class="show pull-left" href="/2016/10/19/HTML5+CSS3基础回顾 /">
        <i class="icon icon-angle-left"></i>
    </a>
    <a class="show pull-right" href="/2016/10/27/JavaScript-code-snippets/">
        <i class="icon icon-angle-right"></i>
    </a>
  </div>




</div>


  <a id="backTop" class="back-top">
    <i class="icon-angle-up"></i>
  </a>




  <div class="modal" id="modal">
  <span id="cover" class="cover hide"></span>
  <div id="modal-dialog" class="modal-dialog hide-dialog">
    <div class="modal-header">
      <span id="close" class="btn-close">关闭</span>
    </div>
    <hr>
    <div class="modal-body">
      <ul class="list-toolbox">
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/archives/"
              rel="noopener noreferrer"
              target="_self"
              >
              博客
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/categories/"
              rel="noopener noreferrer"
              target="_self"
              >
              分类
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/tags/"
              rel="noopener noreferrer"
              target="_self"
              >
              标签
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/search/"
              rel="noopener noreferrer"
              target="_self"
              >
              搜索
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/link/"
              rel="noopener noreferrer"
              target="_self"
              >
              友链
            </a>
          </li>
        
          <li class="item-toolbox">
            <a
              class="CIRCLE"
              href="/about/"
              rel="noopener noreferrer"
              target="_self"
              >
              关于
            </a>
          </li>
        
      </ul>

    </div>
  </div>
</div>



  
      <div class="fexo-comments comments-post">
    

    

    
    

    

    
    

    

<!-- Gitalk评论插件通用代码 -->
<div id="gitalk-container"></div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script>
const gitalk = new Gitalk({
  clientID: '5567a2c4abb858009d96',
  clientSecret: 'b9039ec056cf5c2346b3cdb63308a28c163f91e5',
  repo: 'poetries.github.io',
  owner: 'poetries',
  // 在这里设置一下截取前50个字符串, 这是因为 github 对 label 的长度有了要求, 如果超过
  // 50个字符串则会报错.
  // id: location.pathname.split('/').pop().substring(0, 49),
  id: location.pathname,
  admin: ['poetries'],
  // facebook-like distraction free mode
  distractionFreeMode: false
})
gitalk.render('gitalk-container')
</script>
<!-- Gitalk代码结束 -->



  </div>

  

  <script type="text/javascript">
  function loadScript(url, callback) {
    var script = document.createElement('script')
    script.type = 'text/javascript';

    if (script.readyState) { //IE
      script.onreadystatechange = function() {
        if (script.readyState == 'loaded' ||
          script.readyState == 'complete') {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function() {
        callback();
      };
    }

    script.src = url;
    document.getElementsByTagName('head')[0].appendChild(script);
  }

  window.onload = function() {
    loadScript('/js/bundle.js?235683', function() {
      // load success
    });
  }
</script>


  <!-- 页面点击小红心 -->
  <script type="text/javascript" src="/js/clicklove.js"></script>
 
  
</body>
</html>
